/* ==========================================================================
   ENERBOX — UI KIT (Temu-like)
   Estructura:
   0) Variables / Reset
   1) Layout base (header, categorías, container, footer)
   2) Home / Grid de productos
   3) Detalle de producto (galería + ficha)
   4) Carrito
   5) Admin (dashboard + CRUD + modales + uploads)
   6) Variantes (chips color) + Atributos
   7) Helpers (botones, chips, links)
   8) Responsive
   ========================================================================== */

/* ===== 0) VARIABLES / RESET ===== */
:root{
  /* Marca principal EnerBox */
  --brand:#0ea5e9;      /* azul corporativo */
  --brand-2:#10b981;    /* verde energía */
  --accent:#00afb9;     /* turquesa para detalles */
  --sun:#ffb703;        /* acento cálido (glow footer) */

  --ink:#0b1220;
  --muted:#6b7280;
  --bg:#f6f8fb;
  --card:#ffffff;

  --danger:#ef4444;
  --warning:#f59e0b;
  --whatsapp:#25D366;

  /* medidas */
  --radius:1rem;
  --radius-sm:.6rem;
  --container:1280px;
}

/* Reset mínimo */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Contenedor */
.container{ padding:.8rem .6rem; max-width:var(--container); margin:0 auto; }
.container.tight{ max-width:var(--container); margin:0 auto; padding:12px; }

/* ===== 1) LAYOUT BASE ===== */

/* Promo (opcional) */
.promo-strip{ background:#0f1f1f; color:#cde; font-size:.9rem; text-align:center; padding:.35rem; }

/* Header Temu-like */
.mainbar{ position:sticky; top:0; z-index:900; background:#132e2e; border-bottom:1px solid #123; }
.mainbar-inner{
  display:grid; grid-template-columns:auto 1fr auto; gap:.8rem;
  align-items:center; padding:.6rem 12px; max-width:var(--container); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:.5rem; color:#e9fbff; text-decoration:none; font-size:1.1rem; }
.brand .logo{ background:#0aa; display:inline-grid; place-items:center; border-radius:8px; width:28px; height:28px; }
.brand .muted{ opacity:.8; font-weight:600; }

/* Buscador */
.search{ display:flex; align-items:center; gap:.4rem; background:#fff; border-radius:999px; padding:.25rem .3rem; border:1px solid #dfe4ea; }
.search input{ border:0; outline:0; flex:1 1 auto; padding:.45rem .7rem; border-radius:999px; font-size:.95rem; }
.search button{ border:0; background:var(--brand); color:#fff; border-radius:999px; padding:.45rem .8rem; cursor:pointer; }
.search button:hover{ background:#0b87c4; }

/* Iconos de acción */
.top-actions{ display:flex; gap:.45rem; }
.icon-link{ display:grid; place-items:center; width:36px; height:36px; border-radius:999px; background:#0c3a3a; color:#e9fbff; text-decoration:none; border:1px solid #0a3030; }
.icon-link:hover{ background:#0f4747; }

/* Categorías estilo Temu */
.cat-nav{ background:#102828; border-top:1px solid #0c2121; border-bottom:1px solid #0c2121; }
.cat-scroll{
  max-width:var(--container); margin:0 auto; display:flex; gap:.6rem; overflow:auto; padding:.5rem 12px;
  scroll-snap-type:x proximity;
}
.cat-scroll.center{ justify-content:center; }
.cat-pill{
  display:flex; flex-direction:column; align-items:center; gap:.35rem; text-decoration:none; color:#dff; min-width:86px; scroll-snap-align:start;
}
.cat-pill .circ{
  width:54px; height:54px; border-radius:999px; background:#0f3b3b;
  display:grid; place-items:center; border:1px solid #0b2e2e; overflow:hidden;
}
.cat-pill .circ img{ width:100%; height:100%; object-fit:cover; border-radius:999px; }
.cat-pill .lbl{ font-size:.85rem; white-space:nowrap; max-width:90px; overflow:hidden; text-overflow:ellipsis; opacity:.95; }
.cat-pill.active .circ{ outline:2px solid var(--accent); }
.cat-pill.active .lbl{ color:#fff; }

/* Footer animado */
.footer-animated{ position:relative; margin-top:1rem; background:#0f1f1f; color:#cde; }
.footer-animated .footer-content{ max-width:var(--container); margin:0 auto; padding:1rem 12px; text-align:center; }
.footer-animated .footer-glow{
  position:absolute; inset:auto 0 0 0; height:4px;
  background:linear-gradient(90deg,transparent, var(--accent), var(--sun), var(--accent), transparent); filter:blur(6px);
}

/* ------- BUSCADOR RESPONSIVE MEJORADO (MÓVIL) ------- */
@media (max-width: 768px) {

  /* Contenedor del header en móvil: fila 1 brand + acciones, fila 2 el buscador */
  .mainbar-inner{
    display:flex;
    flex-wrap:wrap;              /* permite que el buscador baje a otra línea */
    align-items:center;
    justify-content:space-between;
    padding:8px 10px;
    gap:8px;
    max-width:var(--container);
    margin:0 auto;
  }

  /* Logo a la izquierda */
  .brand{
    flex:0 0 auto;
  }

  /* Iconos (login, carrito, WhatsApp) a la derecha */
  .top-actions{
    flex:0 0 auto;
    display:flex;
    gap:.45rem;
    margin-left:auto;
  }

  /* BUSCADOR: ocupa toda la fila debajo, centrado y ancho completo */
  .search{
    order:2;                     /* siempre debajo */
    flex:1 0 100%;               /* nueva fila, 100% de ancho */
    width:100%;
    max-width:100%;
    margin:2px 0 6px;            /* un poquito de aire arriba y abajo */
  }

  .search input{
    width:100%;
    min-width:0;
    font-size:15px;
    padding:9px 12px;
  }

  .search button{
    padding:9px 10px;
    font-size:16px;
  }
}


/* ===== 2) HOME / GRID DE PRODUCTOS ===== */

.grid-products.temu{
  display:grid; gap:.65rem;
  grid-template-columns:repeat(3, 1fr); /* móvil 3 */
}
@media (min-width:1024px){
  .grid-products.temu{ grid-template-columns:repeat(5, 1fr); } /* desktop 5 */
}

.p-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--card); border-radius:10px; border:1px solid #eaeef2; overflow:hidden;
  transition:box-shadow .15s ease, transform .15s ease;
}
.p-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-1px); }

.p-thumb{ position:relative; background:#fff; display:grid; place-items:center; aspect-ratio:1/1; }
.p-thumb img{ width:100%; height:100%; object-fit:contain; padding:.4rem; }

.p-badge{ position:absolute; left:8px; top:8px; font-size:.75rem; padding:.25rem .5rem; border-radius:999px; color:#fff; }
.p-badge.en_camino{ background:var(--warning); }
.p-badge.agotado{ background:var(--danger); }
.p-badge.por_encargo{ background:#6d28d9; }

.p-body{ padding:.55rem .6rem; }
.p-name{ font-size:.95rem; line-height:1.25; min-height:2.4em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.p-meta{ margin-top:.25rem; display:flex; align-items:center; justify-content:space-between; gap:.4rem; }
.p-price{ color:#0a7f42; font-weight:800; }
.chip.tiny{ font-size:.75rem; border:1px solid #e5e7eb; border-radius:999px; padding:.1rem .45rem; background:#f8fafc; }

.search-info{ padding:.6rem .2rem; color:var(--muted); }
.empty{ background:#fff; border:1px dashed #cbd5e1; border-radius:10px; padding:1rem; text-align:center; color:#475569; margin-top:.8rem; }

/* Fila añadir en card */
.card-add-row{ display:flex; gap:.4rem; margin-top:.45rem; }

/* ===== 3) DETALLE DE PRODUCTO ===== */

.product-detail.pro{ display:grid; gap:1rem; }
@media(min-width:960px){ .product-detail.pro{ grid-template-columns:1.2fr 1fr; } }

.media-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius);
  padding:.6rem; box-shadow:0 1px 4px rgba(0,0,0,.05);
}
#main-photo{ width:100%; height:auto; max-height:540px; object-fit:contain; border-radius:.6rem; background:#eef2f7; }

.thumbs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.thumbs .thumb{
  border:1px solid #e5e7eb; background:#fff; border-radius:.6rem; padding:.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.thumbs .thumb img{ width:70px; height:70px; object-fit:cover; border-radius:.4rem; }
.thumbs .thumb.active{ outline:2px solid var(--brand); }

.pd-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius);
  padding:1rem; box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.pd-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.pd-title{ margin:0; }
.pd-badges .badge{
  position:static; padding:.25rem .6rem; border-radius:.6rem; font-size:.78rem; font-weight:800; color:#fff; background:var(--brand-2);
}
.pd-price{ font-size:1.8rem; font-weight:900; margin:.4rem 0; }
.pd-currency{ font-weight:600; color:#6b7280; font-size:.9rem; }
.pd-desc{ color:#475569; }
.pd-variants{ margin:.6rem 0; }
.variant-row.wrap{ flex-wrap:wrap; }
.pd-actions{ display:flex; gap:.6rem; margin-top:.6rem; flex-wrap:wrap; }

/* ===== 4) CARRITO ===== */

.cart-box{ background:#fff; border-radius:var(--radius); padding:1rem; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.cart-list{ display:flex; flex-direction:column; gap:.6rem; margin-top:.6rem; }
.cart-row{
  display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  border:1px solid #e5e7eb; border-radius:.8rem; padding:.6rem; background:#fff;
}
.cr-left{ display:flex; gap:.6rem; align-items:center; }
.cr-img{ width:70px; height:70px; object-fit:contain; border-radius:.6rem; border:1px solid #eef2f7; background:#fff; }
.cr-info .cr-name{ font-weight:700; }
.cr-info .cr-variant{ font-size:.85rem; color:#6b7280; }
.cr-info .cr-price{ color:#0a7f42; font-weight:800; }
.cr-right{ display:flex; align-items:center; gap:.6rem; }
.cart-qty{ display:flex; align-items:center; gap:.25rem; }
.cart-qty .qbtn,
.qty .qbtn{
  width:34px; height:34px; line-height:1;
  border:1px solid #e5e7eb; background:#fff; border-radius:.5rem; cursor:pointer; font-weight:900;
}
.cart-qty input[name="qty"],
.qty input[name="qty"]{
  width:4ch; height:34px; text-align:center;
  border:1px solid #e5e7eb; border-radius:.5rem; background:#fff; color:#111827; font-weight:600; margin:0 .25rem;
}
.cr-subtotal{ font-weight:700; }
.cart-total{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:.6rem; font-size:1.1rem; }
.ct-amount{ color:#0a7f42; font-weight:900; }

/* ===== 5) ADMIN ===== */

/* Cards / tablas / formularios */
.card{ background:var(--card); border-radius:var(--radius); box-shadow:0 1px 4px rgba(0,0,0,.06); border:1px solid #e5e7eb; }
.card.soft{ box-shadow:none; border:1px dashed #e5e7eb; }
.card--padded{ padding:1rem; }
.card-title{ margin:.2rem 0 .8rem; }

.form-grid{ display:grid; gap:.6rem; }
.form-actions{ display:flex; gap:.5rem; margin-top:.4rem; }
.form-actions.right{ justify-content:flex-end; }
.upload-inline{ display:flex; gap:0; align-items:center; }
.upload-inline > input[type="text"], .upload-inline > input:not([type]){ flex:1 1 auto; border-right:0; }
.upload-inline > .btn.ghost{ border:1px solid #e5e7eb; border-left:0; border-top-right-radius:.6rem; border-bottom-right-radius:.6rem; }

.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%; padding:.55rem .7rem; border:1px solid #e5e7eb; border-radius:var(--radius-sm);
  background:#fff; font-size:.95rem; color:#111827; transition:border-color .15s ease, box-shadow .15s ease;
}
.form-grid textarea{ resize:vertical; }
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{
  outline:none; border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25);
}
.form-grid label{ color:#374151; font-weight:600; margin-top:.3rem; }

.admin-grid{ display:grid; gap:.8rem; margin-top:.6rem; }
@media(min-width:900px){ .admin-grid{ grid-template-columns:1fr 1fr; } }
.card.span-2{ grid-column:1 / -1; }

.table.pretty{ border-radius:var(--radius); overflow:hidden; border:1px solid #e5e7eb; margin-top:.6rem; }
.table.pretty .row{
  padding:.7rem .9rem; display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:.6rem; align-items:center; border-top:1px solid #f1f5f9;
}
.table.pretty .row.head{ background:#f9fafb; font-weight:800; border-top:none; }
.pagination{ display:flex; gap:.6rem; align-items:center; justify-content:flex-end; margin-top:.6rem; }

.mini-list{ margin-top:.6rem; }
.mini-item{ padding:.3rem .4rem; border-radius:.6rem; background:#f9fafb; border:1px solid #eef2f7; margin-bottom:.3rem; }
.link.sm{ border:none; background:transparent; color:var(--brand); cursor:pointer; padding:.2rem .3rem; }
.link.sm.danger{ color:var(--danger); }
.right{ float:right; }

/* Modales bonitos */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:16px;
  background:rgba(15,23,42,.45); z-index:1000;
}
.modal.open{ display:flex; }
.modal-card{
  width:100%; max-width:860px; background:#fff; border-radius:14px; border:1px solid #e5e7eb;
  box-shadow:0 20px 60px rgba(0,0,0,.18); overflow:hidden; transform:translateY(8px); animation:modal-pop .18s ease-out both;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.9rem 1rem; background:#f8fafc; border-bottom:1px solid #eef2f7; }
.modal-head b{ font-size:1rem; }
.modal-head .close{ border:0; background:transparent; font-size:1.2rem; cursor:pointer; line-height:1; }
.modal-body{ padding:1rem; color:#334155; }
.modal .form-actions{ padding:.8rem 1rem 1rem; }
@keyframes modal-pop{ from{ opacity:0; transform:translateY(10px) scale(.98);} to{ opacity:1; transform:translateY(0) scale(1);} }
body.modal-open{ overflow:hidden; }

/* Galería inputs en admin */
.gallery-grid{ display:grid; gap:.5rem; grid-template-columns:1fr; }
@media(min-width:900px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }

/* ===== 6) VARIANTES + ATRIBUTOS ===== */

.variant-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.variant-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .7rem; border:2px solid #e5e7eb; border-radius:.75rem;
  background:#fff; cursor:pointer; user-select:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease;
}
.variant-chip input{ position:absolute; opacity:0; pointer-events:none; }
.variant-chip .dot{ width:18px; height:18px; border-radius:999px; border:1px solid rgba(0,0,0,.08); display:inline-block; }
.variant-chip.active{
  border-color:var(--brand-2);
  box-shadow:0 6px 18px rgba(16,185,129,.20);
  background:linear-gradient(180deg,#ffffff 0%, #f8fffb 100%);
  transform:translateY(-1px);
}
.variant-chip:hover{ border-color:#a7f3d0; }
.variant-chip:focus-within{ outline:2px solid #34d399; outline-offset:2px; }
.pd-variants label{ font-weight:600; margin-bottom:.25rem; display:block; }

/* Atributos en ficha */
.pd-attrs{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem; }
.chip.big{
  display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .6rem;
  background:#f7f8fa; border:1px solid #e5e7eb; border-radius:.6rem; font-size:.92rem; color:#111827;
}
.chip.big b{ font-weight:600; color:#0f172a; }

/* ===== 7) HELPERS (botones y chips) ===== */

.btn{
  border:none; border-radius:.8rem; padding:.6rem .9rem; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; font-weight:600;
}
.btn.primary{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; }
.btn.ghost{ background:#f3f4f6; color:#111; }
.btn.cart{ background:#111; color:#fff; }
.btn.small{ padding:.35rem .55rem; font-size:.85rem; border-radius:.5rem; }

.btn.whatsapp{ background:var(--whatsapp); color:#fff; }

/* Chips genéricos */
.chip{ flex:0 0 auto; padding:.45rem .75rem; border-radius:999px; background:#f3f4f6; color:#111; text-decoration:none; font-weight:600; font-size:.92rem; white-space:nowrap; }
.chip.active{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; }

/* ===== 8) RESPONSIVE ===== */

/* Tablets */
@media (max-width: 1024px) {
  .grid-products.temu{ grid-template-columns: repeat(4, 1fr); }
}

/* Móviles medianos */
@media (max-width: 768px) {
  .grid-products.temu{ grid-template-columns: repeat(3, 1fr); }
  .product-detail.pro{ grid-template-columns: 1fr; gap:1rem; }
  .pd-left, .pd-right{ width:100%; }
  .pd-card{ padding:1rem; }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .grid-products.temu{ grid-template-columns: repeat(2, 1fr); }
  .p-card img{ border-radius:.5rem; }
  .pd-price{ font-size:1.4rem; }
  .btn, .btn.primary{ font-size:.9rem; padding:.5rem .7rem; }
}

/* ===== FIX: Badges sin cortes raros (“Por encargo”) ===== */
.p-badge,
.pd-badges .badge,
.badge{
  white-space: nowrap;      /* no dividir en 2 líneas */
  word-break: keep-all;     /* respetar palabras completas */
  hyphens: none;            /* sin guiones automáticos */
  line-height: 1;           /* altura compacta y uniforme */
  display: inline-flex;     /* centra verticalmente */
  align-items: center;
  padding: .3rem .55rem;    /* un pelín más de aire */
}

/* Evitar que el badge quede apretado dentro del thumb */
.p-thumb{ padding: .15rem; }

/* ===== FIX: Espacio cómodo antes del footer en el carrito ===== */
.cart-box{ margin-bottom: 2rem; }        /* caja del carrito separada del footer */
.cart-box .form-actions{ margin-top: .9rem; }  /* aire sobre los botones */
.footer-animated{ margin-top: 2.2rem; }  /* más respiro visual global */

/* =========================
   FIXES — ADMIN DASHBOARD
   (pegar al final del CSS)
   ========================= */

/* Contenedor ancho cómodo solo en admin */
body.has-admin .container.tight{
  max-width: 1280px;
  padding: 12px;
}

/* Grid principal del admin (categorías/variantes a la izquierda y producto a la derecha) */
body.has-admin .admin-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;        /* móvil: 1 columna */
}
@media (min-width: 900px){
  body.has-admin .admin-grid{
    grid-template-columns: 1fr 1fr;  /* desktop: 2 columnas */
  }
}

/* Las cards del admin con padding consistente */
body.has-admin .card{
  background: var(--card);
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
body.has-admin .card--padded{ padding: 1rem; }
body.has-admin .card.soft{
  box-shadow: none;
  border-style: dashed;
}

/* Stats (métricas) en el dashboard */
body.has-admin .admin-dash{ display: grid; gap: 1rem; margin-bottom: 1rem; }

body.has-admin .stat-cards{
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px){
  body.has-admin .stat-cards{ grid-template-columns: repeat(4, 1fr); }
}
body.has-admin .stat{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  padding:1rem;
}
body.has-admin .stat-num{ font-weight:900; font-size:1.6rem; }
body.has-admin .stat-label{ color:#6b7280; }

/* Barras por estado */
body.has-admin .bars{
  background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1rem;
}
body.has-admin .bar-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:.6rem; align-items:center; margin:.35rem 0;
}
body.has-admin .bar{
  height:10px; background:#eef2f7; border-radius:999px; overflow:hidden;
}
body.has-admin .bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); }

/* Últimos productos */
body.has-admin .last-box{
  background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1rem;
}
body.has-admin .last-grid{
  display:grid; gap:.6rem; grid-template-columns:repeat(2,1fr);
}
@media (min-width: 900px){
  body.has-admin .last-grid{ grid-template-columns:repeat(4,1fr); }
}
body.has-admin .last-item{
  display:flex; gap:.6rem; background:#f9fafb; border:1px solid #eef2f7;
  border-radius:.8rem; overflow:hidden; text-decoration:none; color:inherit; padding:.4rem;
}
body.has-admin .last-item img{ width:68px; height:68px; object-fit:cover; border-radius:.4rem; }

/* Formularios del admin */
body.has-admin .form-grid{ display:grid; gap:.6rem; }
body.has-admin .form-actions{ display:flex; gap:.5rem; margin-top:.4rem; }
body.has-admin .form-actions.right{ justify-content:flex-end; }
body.has-admin .upload-inline{ display:flex; gap:.4rem; align-items:center; }
body.has-admin .upload-inline input[type="text"],
body.has-admin .upload-inline input:not([type]){ flex:1; }

/* Evitar que .right con float rompa filas del admin */
body.has-admin .right{
  float: none !important;
  margin-left: auto;
  display: inline-flex;
  gap: .4rem;
  align-items: center;
}

/* Tabla de productos del admin */
body.has-admin .table.pretty{
  border:1px solid #e5e7eb; border-radius:1rem; overflow:hidden; margin-top:.6rem;
}
body.has-admin .table.pretty .row{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr; /* Producto | Categoría | Precio | Estado | Acciones */
  gap:.6rem; align-items:center; padding:.7rem .9rem; border-top:1px solid #f1f5f9;
}
body.has-admin .table.pretty .row.head{
  background:#f9fafb; font-weight:800; border-top:none;
}

/* Tabla responsive en pantallas pequeñas: apilamos */
@media (max-width: 760px){
  body.has-admin .table.pretty .row{
    grid-template-columns: 1fr;         /* una columna */
    gap: .35rem;
  }
  body.has-admin .table.pretty .row .cell.actions{
    display:flex; gap:.4rem; flex-wrap:wrap;
  }
}

/* Paginación alineada a la derecha con aire */
body.has-admin .pagination{
  display:flex; gap:.6rem; align-items:center; justify-content:flex-end; margin-top:.8rem;
}

/* Aire extra bajo el dashboard antes de la siguiente card */
body.has-admin .admin-dash + .admin-grid{ margin-top: .6rem; }

/* Margen seguro antes del footer cuando estás en admin */
body.has-admin .container.tight{ margin-bottom: 2rem; }

/* ===== Admin: campos compactos en formularios ===== */
body.has-admin .inline-fields{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
  gap: .7rem .9rem;
  align-items: end;                /* alinea la base de los controles */
}

/* Cada bloque (label + control) no se estira infinito */
body.has-admin .inline-fields > div{
  display: grid;
  gap: .35rem;
  max-width: 360px;                /* límite general por bloque */
}

/* Ajuste fino por tipo de campo */
body.has-admin .inline-fields input[name="name"]{
  max-width: 360px;                /* nombre mediano */
}
body.has-admin .inline-fields input[name="price"]{
  max-width: 160px;                /* precio corto */
}
body.has-admin .inline-fields select[name="status"],
body.has-admin .inline-fields select[name="category_id"]{
  max-width: 220px;                /* selects contenidos */
}

/* En el modal de edición: el mismo patrón */
.modal .inline-fields{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
  gap: .6rem .8rem;
  align-items: end;
}
.modal .inline-fields > div{ max-width: 360px; }
.modal .inline-fields input[name="price"]{ max-width: 160px; }
.modal .inline-fields select[name="status"],
.modal .inline-fields select[name="category_id"]{ max-width: 220px; }

/* =======================
   AUTH / LOGIN (responsive)
   ======================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,1,1);white-space:nowrap;border:0}

.auth-wrap{
  min-height: calc(100dvh - 160px); /* espacio contando header/footer */
  display: grid;
  place-items: center;
  padding: 16px;
}

.auth-card{
  width: 100%;
  max-width: 420px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  padding: 18px;
}

.auth-head{ text-align:center; margin-bottom: 10px; }
.auth-logo{
  width:56px;height:56px; border-radius:14px;
  display:grid; place-items:center;
  margin: 0 auto .5rem;
  background: linear-gradient(135deg, var(--accent, #00afb9), #0ea5e9);
  color:#fff; font-size:1.2rem; font-weight:800;
  border:1px solid rgba(255,255,255,.3);
}
.auth-title{ font-weight:800; font-size:1.1rem; }
.auth-sub{ color:#64748b; font-size:.95rem; margin-top:.15rem; }

.alert.error{
  background:#fee2e2; color:#991b1b;
  border:1px solid #fecaca; border-radius:10px;
  padding:.6rem .8rem; margin:.6rem 0 .2rem;
}

.auth-form{ display:grid; gap:.65rem; margin-top:.3rem; }
.field input{
  width:100%; padding:.7rem .8rem;
  border:1px solid #e5e7eb; border-radius:.7rem;
  background:#fff; color:#111827; font-size:.97rem;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{
  outline:0; border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.25);
}
.w-100{ width:100%; }
.auth-help{ text-align:center; margin-top:.4rem; }
.auth-help a{ color:var(--brand); text-decoration:none; }
.auth-help a:hover{ text-decoration:underline; }

/* =======================
   MODALES DE EDICIÓN pulidos
   ======================= */
.modal-card{ border-radius: 14px; }
.modal-card.lg{ max-width: 860px; }   /* úsalo en el modal de editar producto */

.modal .form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem .9rem;
  align-items: start;
}
@media (min-width: 900px){
  /* dos columnas elegantes en desktop */
  .modal .form-grid.two-col{
    grid-template-columns: 1fr 1fr;
  }
  .modal .form-grid.two-col .full,
  .modal .form-grid.two-col .span-2{
    grid-column: 1 / -1;
  }
}

/* Inputs/labels en el modal */
.modal .form-grid label{
  color:#374151;font-weight:600; margin-top:.15rem;
}
.modal .form-grid input,
.modal .form-grid select,
.modal .form-grid textarea{
  width:100%; padding:.6rem .7rem;
  border:1px solid #e5e7eb; border-radius:.6rem;
  background:#fff; color:#111827; font-size:.95rem;
  transition:border-color .15s, box-shadow .15s;
}
.modal .form-grid input:focus,
.modal .form-grid select:focus,
.modal .form-grid textarea:focus{
  outline:0; border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.25);
}
.modal .form-actions{ display:flex; justify-content:flex-end; gap:.5rem; }

/* Upload inline dentro del modal */
.modal .upload-inline{ display:flex; gap:0; }
.modal .upload-inline > input{ flex:1; border-right:0; }
.modal .upload-inline > .btn{
  border:1px solid #e5e7eb; border-left:0;
  border-top-left-radius:0; border-bottom-left-radius:0;
}

/* Chips de variantes también dentro del modal */
.modal .variant-row{ display:flex; flex-wrap:wrap; gap:.45rem; }
.modal .variant-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .6rem; border:2px solid #e5e7eb; border-radius:.7rem;
  background:#fff; cursor:pointer; user-select:none;
  transition:border-color .18s, box-shadow .18s, transform .12s, background .18s;
}
.modal .variant-chip .dot{ width:16px; height:16px; border-radius:999px; border:1px solid rgba(0,0,0,.08); }
.modal .variant-chip.active{
  border-color:#10b981; box-shadow:0 6px 18px rgba(16,185,129,.20);
  background:linear-gradient(180deg,#ffffff 0%, #f8fffb 100%);
  transform:translateY(-1px);
}

/* Compactar campos cortos en modal (precio/estado/categoría) */
.modal .form-grid .row-inline{
  display:grid; gap:.6rem;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 900px){
  .modal .form-grid .row-inline{ grid-template-columns: 1fr 1fr 1fr; }
}

/* Campos cortos en línea (admin) */
.inline-fields{
  display:grid; gap:.6rem;
  grid-template-columns: 1fr;
}
.inline-fields .if-col{ display:flex; flex-direction:column; gap:.25rem; }
@media(min-width: 900px){
  .inline-fields{ grid-template-columns: repeat(4, 1fr); }
}

/* ===== AUTH / LOGIN CUBAVOLT ===== */

.auth-wrap{
  min-height: calc(100vh - 160px); /* descuenta header + footer aprox */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem 0.75rem;
}

.auth-card{
  width:100%;
  max-width:380px;
  background:#ffffff;
  border-radius:1rem;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 30px rgba(15,23,42,.12);
  padding:1.4rem 1.3rem 1.5rem;
}

.auth-head{
  text-align:center;
  margin-bottom:1rem;
}

.auth-logo{
  width:48px;height:48px;
  border-radius:999px;
  background:linear-gradient(135deg,#00afb9,#006d77);
  display:inline-grid;
  place-items:center;
  color:#fff;
  font-size:1.4rem;
  margin-bottom:.4rem;
}

.auth-title{
  font-weight:800;
  font-size:1.1rem;
  color:#111827;
}

.auth-sub{
  font-size:.9rem;
  color:#6b7280;
  margin-top:.1rem;
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.auth-form .field{
  display:block;
}

.auth-form .field input{
  width:100%;
  padding:.6rem .75rem;
  border-radius:.75rem;
  border:1px solid #e5e7eb;
  font-size:.95rem;
  background:#f9fafb;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.auth-form .field input:focus{
  outline:none;
  border-color:#0ea5e9;
  background:#ffffff;
  box-shadow:0 0 0 3px rgba(14,165,233,.22);
}

.w-100{
  width:100%;
  justify-content:center;
  text-align:center;
}

.auth-help{
  margin-top:.5rem;
  text-align:center;
  font-size:.9rem;
}

.auth-help a{
  color:#006d77;
  text-decoration:none;
}

.auth-help a:hover{
  text-decoration:underline;
}

/* Alertas login */
.alert{
  border-radius:.75rem;
  padding:.55rem .7rem;
  font-size:.9rem;
  margin-bottom:.4rem;
}

.alert.error{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#b91c1c;
}

/* Label solo para lectores de pantalla */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Ajustes móviles extra pequeños */
@media (max-width:480px){
  .auth-card{
    padding:1.1rem 1rem 1.3rem;
    box-shadow:0 6px 18px rgba(15,23,42,.14);
  }
}

/* ===== CARRITO RESPONSIVE CUBAVOLT ===== */

.cart-box{
  margin-top:1rem;
}

/* Lista en columna con aire */
.cart-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

/* Tarjeta de cada ítem */
.cart-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  border:1px solid #e5e7eb;
  border-radius:.9rem;
  padding:.7rem .75rem;
  background:#ffffff;
}

.cr-left{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  min-width:0;
}

.cr-img{
  width:70px;
  height:70px;
  border-radius:.7rem;
  border:1px solid #e5e7eb;
  object-fit:contain;
  background:#f8fafc;
}

.cr-info{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.cr-name{
  font-weight:700;
  font-size:.95rem;
  line-height:1.25;
}

.cr-variant{
  font-size:.85rem;
  color:#6b7280;
}

.cr-price{
  font-weight:800;
  color:#0a7f42;
  font-size:.9rem;
}

/* Lado derecho: cantidad + subtotal */
.cr-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.35rem;
  min-width:140px;
}

.cart-qty{
  display:flex;
  align-items:center;
  gap:.25rem;
}

.cart-qty .qbtn{
  width:32px;
  height:32px;
  border-radius:.5rem;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
}

.cart-qty input[name="qty"]{
  width:3.2ch;
  height:32px;
  text-align:center;
  border:1px solid #e5e7eb;
  border-radius:.5rem;
  background:#fff;
  font-weight:600;
}

.cr-subtotal{
  font-weight:800;
  font-size:.95rem;
}

/* Total y botones al pie */
.cart-total{
  display:flex;
  justify-content:flex-end;
  gap:.6rem;
  margin-top:.75rem;
  padding-top:.75rem;
  border-top:1px dashed #e5e7eb;
  font-size:1.05rem;
}

.ct-amount{
  color:#0a7f42;
  font-weight:900;
}

/* Botones de acciones del carrito */
.form-actions.right{
  margin-top:.7rem;
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
  flex-wrap:wrap;
}

/* ===== Ajustes en móvil ===== */
@media (max-width: 768px){
  .cart-row{
    flex-direction:column;
    align-items:stretch;
  }

  .cr-right{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    margin-top:.4rem;
    width:100%;
  }

  .cart-qty{
    flex-wrap:nowrap;
  }

  .cr-subtotal{
    margin-left:auto;
  }

  .cart-total{
    justify-content:space-between;
  }

  .form-actions.right{
    justify-content:space-between;
  }
}

/* Un poco más de aire abajo para que no choque con el footer */
.container.tight{
  padding-bottom:1.8rem;
}

/* ==== FIX SCROLL HORIZONTAL EN MÓVIL (HEADER + LOGIN) ==== */

/* Nunca más scroll horizontal raro */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Que el grid del header no se pase del ancho */
.mainbar-inner {
  width: 100%;
  box-sizing: border-box;
}

/* El bloque del buscador debe poder encogerse */
.search {
  min-width: 0;          /* importante para que no ensanche el grid */
}

/* Y el input también, para que no empuje los íconos fuera de pantalla */
.search input {
  min-width: 0;
  flex: 1 1 auto;
}

/* Los iconos de la derecha no se encogen ni deforman */
.top-actions {
  flex-shrink: 0;
}

/* ===== NAVIDAD: NIEVE CAYENDO ===== */

.snowflake {
  position: fixed;
  top: -10px;
  color: #fff;
  font-size: 1rem;
  pointer-events: none;
  z-index: 9999;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

@keyframes snowflakes-fall {
  0% { top: -10px; }
  100% { top: 110vh; }
}

@keyframes snowflakes-shake {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }
}

/* =========================
   MODO NAVIDAD CUBAVOLT 🎄
   ========================= */

/* NIEVE (si ya la tienes definida, no la dupliques) */
.snowflake {
  position: fixed;
  top: -10px;
  color: #fff;
  font-size: 1rem;
  pointer-events: none;
  z-index: 9999;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

@keyframes snowflakes-fall {
  0% { top: -10px; }
  100% { top: 110vh; }
}

@keyframes snowflakes-shake {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }
}

/* Fondo ligeramente nocturno SOLO en el home */
body.xmas-home {
  background: radial-gradient(circle at top, #0b1120 0, #020617 40%, #020617 100%);
}

/* Contenedor principal con borde navideño suave */
body.xmas-home .container.tight{
  background: rgba(15,23,42,.92);
  border-radius: 18px;
  border: 1px solid rgba(248,250,252,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.7);
  position: relative;
  overflow: hidden;
}

/* Borde exterior decorativo (rojo/verde con glow) */
body.xmas-home .container.tight::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 20px;
  padding:2px;
  background: linear-gradient(135deg,#16a34a,#22c55e,#ef4444,#f97316,#22c55e);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.9;
  pointer-events:none;
}

/* Banner de 'Feliz Navidad' */
.xmas-banner{
  background: linear-gradient(90deg,#047857,#16a34a,#b91c1c);
  color:#f9fafb;
  padding:.45rem .9rem;
  font-size:.92rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
}
.xmas-banner .xmas-icon{
  font-size:1.3rem;
}
.xmas-banner .xmas-text strong{
  font-weight:800;
}

/* Guirnalda de luces debajo del header */
body.xmas-home .mainbar{
  position:sticky;
  top:0;
  z-index:900;
  box-shadow:0 10px 28px rgba(15,23,42,.9);
}
body.xmas-home .mainbar::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-6px;
  height:22px;
  background:
    radial-gradient(circle at 5% 60%, #f97316 0 4px, transparent 5px),
    radial-gradient(circle at 20% 40%, #facc15 0 4px, transparent 5px),
    radial-gradient(circle at 35% 60%, #22c55e 0 4px, transparent 5px),
    radial-gradient(circle at 50% 40%, #38bdf8 0 4px, transparent 5px),
    radial-gradient(circle at 65% 60%, #f97316 0 4px, transparent 5px),
    radial-gradient(circle at 80% 40%, #facc15 0 4px, transparent 5px),
    radial-gradient(circle at 95% 60%, #ef4444 0 4px, transparent 5px);
  opacity:.95;
  pointer-events:none;
}

/* Logo con gorrito de Santa 🎅 */
.brand .logo{
  position:relative;
  overflow:visible;
}
.brand .logo::before{
  content:"";
  position:absolute;
  top:-10px;
  right:-6px;
  width:20px;
  height:20px;
  background: linear-gradient(135deg,#b91c1c 0%,#ef4444 60%);
  border-top-left-radius:20px;
  border-top-right-radius:4px;
  border-bottom-left-radius:4px;
  transform:skewX(-12deg) rotate(10deg);
  box-shadow:0 2px 4px rgba(0,0,0,.35);
}
.brand .logo::after{
  content:"";
  position:absolute;
  top:6px;
  right:-2px;
  width:8px; height:8px;
  border-radius:999px;
  background:#f9fafb;
  box-shadow:0 0 0 1px rgba(148,163,184,.5);
}

/* Ajustar cards al fondo oscuro del modo noche */
body.xmas-home .grid-products.temu .p-card{
  background:rgba(15,23,42,.96);
  border-color:#0f172a;
}
body.xmas-home .p-name{
  color:#e5e7eb;
}
body.xmas-home .p-price{
  color:#4ade80;
}
body.xmas-home .chip.tiny{
  background:#0f172a;
  color:#e5e7eb;
  border-color:#1e293b;
}

/* Que la promo-strip se lea bien sobre el fondo */
body.xmas-home .promo-strip{
  background:#020617;
  color:#e5e7eb;
}

/* =========================
   MARCO NAVIDEÑO HOME
   ========================= */

/* Wrapper interior del home (dentro de .container.tight) */
.xmas-frame{
  position: relative;
  margin-top: .75rem;
  padding: .75rem;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.35);
  background: radial-gradient(circle at top, rgba(15,23,42,.96), rgba(15,23,42,.96));
  overflow: hidden;
}

/* Esquinas decorativas */
.xmas-corner{
  position: absolute;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}

.xmas-corner--tl{ top: 8px; left: 10px; }
.xmas-corner--tr{ top: 8px; right: 10px; }
.xmas-corner--bl{ bottom: 10px; left: 10px; }
.xmas-corner--br{ bottom: 10px; right: 10px; }

@media (max-width: 480px){
  .xmas-corner{
    width: 24px;
    height: 24px;
    font-size: 1rem;
  }
}

/* Píldoras navideñas arriba del grid */
.xmas-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:.25rem 0 .6rem;
}

.xmas-pill{
  padding:.28rem .7rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  white-space:nowrap;
}

.xmas-pill--primary{
  background:linear-gradient(90deg,#b91c1c,#f97316);
  color:#fefce8;
}

.xmas-pill--secondary{
  background:linear-gradient(90deg,#16a34a,#22c55e);
  color:#ecfdf5;
}

/* Textos sobre el fondo oscuro del modo navidad */
body.xmas-home .search-info{
  color:#e5e7eb;
}
body.xmas-home .search-info b{
  color:#facc15;
}