/* ======================================================
   ESTILOS EXCLUSIVOS DEL WIZARD DE PEDIDOS (index.html)
   ====================================================== */
/* Catálogo del cliente en tonos "Executive Beige": lino cálido de fondo,
   acentos dorado/marrón suave — reemplaza el rosa por defecto del panel. */
:root{
  --bg:#FBF7F0;
  --accent:#A9895C; --accent-deep:#7C6238; --accent-tint:#F3EDE1; --accent-rgb:169,137,92;
}
body{
  background:var(--bg);
  background-image:
    radial-gradient(circle at 8% 4%, rgba(var(--accent-rgb),0.08), transparent 42%),
    radial-gradient(circle at 92% 96%, rgba(var(--accent-rgb),0.06), transparent 42%);
  display:flex; justify-content:center; padding:48px 20px 70px;
}
.app{ width:100%; max-width:580px; }

header.top{ display:flex; align-items:center; gap:16px; margin-bottom:44px; }
.logo-badge{
  width:52px;height:52px;border-radius:50%; background:#FFFFFF; border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; font-size:24px;flex:none; box-shadow: var(--shadow-rest);
  background-size:cover; background-position:center;
}
.logo-text{
  font-size:21px;font-weight:700;line-height:1.15; letter-spacing:-0.01em;
  background:linear-gradient(120deg, #FFF6D0 0%, #D4AF37 50%, #F5B400 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.logo-text span{
  display:block;font-family:'Inter';font-weight:500;font-size:13px;margin-top:2px;
  background:none; -webkit-text-fill-color:var(--ink-soft); color:var(--ink-soft);
}

.thread{ position:relative; display:flex; justify-content:space-between; align-items:center; margin:0 6px 48px; }
.thread::before{
  content:""; position:absolute; top:50%; left:24px; right:24px; height:1.5px;
  background-image: linear-gradient(90deg, var(--border) 55%, transparent 45%); background-size: 9px 1.5px;
  transform: translateY(-50%); z-index:0;
}
.thread-step{
  position:relative; z-index:1; width:48px;height:48px;border-radius:50%; background:var(--surface);
  border:1px solid var(--border); display:flex;align-items:center;justify-content:center;
  font-size:16px; font-weight:700; color:var(--ink-soft); transition: all .4s var(--ease);
}
.thread-step small{
  position:absolute; top:58px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:600;
  color:var(--ink-soft); white-space:nowrap; letter-spacing:0.01em;
}
.thread-step.active{ border-color:var(--accent); background:var(--accent); color:#fff; box-shadow:0 10px 22px rgba(var(--accent-rgb),0.4); transform:scale(1.1); }
.thread-step.done{ border-color:var(--accent-deep); background:#fff; color:var(--accent-deep); }

main{margin-top:20px;}
.step{display:none; animation:stepIn .5s var(--ease);}
.step.active{display:block;}
@keyframes stepIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

.card-title{font-size:25px; font-weight:700; margin:0 0 6px; letter-spacing:-0.01em;}
.card-sub{color:var(--ink-soft); font-size:15px; margin:0 0 28px; line-height:1.5;}

/* Catálogo */
.catalogo-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px;}
.producto-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 14px; text-align:center; cursor:pointer; box-shadow:var(--shadow-rest);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.producto-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.producto-foto{
  width:100%; aspect-ratio:1; border-radius:var(--radius-md); background:var(--accent-tint);
  display:flex; align-items:center; justify-content:center; font-size:32px; margin-bottom:12px;
  background-size:cover; background-position:center;
}
.producto-info-catalogo{ margin-bottom:12px; }
.producto-nombre{font-weight:700; font-size:14px; letter-spacing:-0.01em;}
.producto-precio{ font-size:13px; font-weight:700; color:var(--accent-deep); margin-top:4px; }
.btn-agregar-rapido{
  width:100%; background:var(--accent-tint); color:var(--accent-deep); border:1px solid var(--accent);
  border-radius:var(--radius-sm); padding:9px; font-weight:700; font-size:12.5px; cursor:pointer;
  font-family:'Inter'; transition:all .25s var(--ease);
}
.btn-agregar-rapido:hover{ background:var(--accent); color:#fff; }

.cart-count{
  font-size:12.5px; font-weight:700; color:var(--accent-deep); background:var(--accent-tint);
  display:inline-block; padding:6px 14px; border-radius:999px; margin-bottom:16px;
}
.cart-list{margin-bottom:22px;}
.cart-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:10px; font-size:13.5px; box-shadow:var(--shadow-rest);
}
.cart-item .remove{background:none; border:none; color:var(--ink-soft); font-size:17px; cursor:pointer; line-height:1;}
.cart-item .remove:hover{ color:var(--accent-deep); }

.detalle-box{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; }
.detalle-volver{ background:none; border:none; color:var(--accent-deep); font-weight:700; font-size:13px; cursor:pointer; padding:0; margin-bottom:16px; }
.detalle-header{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.detalle-foto{ width:64px; height:64px; border-radius:var(--radius-md); background:var(--accent-tint); display:flex; align-items:center; justify-content:center; font-size:26px; background-size:cover; background-position:center; flex:none; }
.detalle-nombre{font-size:19px; font-weight:700;}

.field{margin-bottom:20px;}
.field label{ display:block; font-weight:600; font-size:13.5px; margin-bottom:8px; color:var(--ink); }
.field .hint{font-weight:400; color:var(--ink-soft); font-size:12.5px; display:block; margin-top:6px;}
input[type=text], input[type=number], input[type=tel], input[type=email], input[type=date], input[type=time], select, textarea{
  width:100%; padding:14px 16px;
}
textarea{min-height:90px; resize:vertical;}

.file-drop{
  border:1.5px dashed var(--border); border-radius:var(--radius-md); padding:22px; text-align:center; cursor:pointer;
  color:var(--ink-soft); font-size:14px; background:#fff; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.file-drop:hover{ border-color:var(--accent); background:var(--accent-tint); }
.preview-thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
.preview-thumbs img{width:60px;height:60px;object-fit:cover;border-radius:var(--radius-sm); border:1px solid var(--border);}
.field .hint.hint-error{ color:var(--danger); }
.field .hint.hint-success{ color:var(--ok); }
#imagen-preview img{ width:140px; height:140px; }

.checkbox-group{display:flex; flex-wrap:wrap; gap:10px;}
.chip{
  border:1px solid var(--border); border-radius:999px; padding:10px 18px; font-size:13.5px; font-weight:600;
  cursor:pointer; color:var(--ink-soft); background:#fff; transition: all .25s var(--ease);
}
.chip:hover{ border-color:var(--accent); }
.chip.on{ border-color:var(--accent); background:var(--accent-tint); color:var(--accent-deep); }

.btn-add-item{
  background:var(--accent-tint); color:var(--accent-deep); border:1.5px dashed var(--accent); border-radius:var(--radius-sm);
  padding:14px; width:100%; font-weight:700; font-size:13.5px; cursor:pointer; margin-top:6px;
  transition:all .25s var(--ease); font-family:'Inter';
}
.btn-add-item:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); }

.row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

.phone-row{ display:flex; gap:8px; }
.phone-row select{ flex:none; width:100px; padding:14px 8px; font-size:13.5px; }
.phone-row input{ flex:1; min-width:0; }

.summary-card{
  background:var(--surface); border-radius:var(--radius-lg); padding:22px; border:1px solid var(--border);
  box-shadow:var(--shadow-rest); margin-bottom:18px;
}
.summary-row{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:14px;}
.summary-row:last-child{border-bottom:none;}
.summary-row .k{color:var(--ink-soft); font-weight:600;}
.summary-row .v{text-align:right; font-weight:700;}

.wa-box{
  background:#EEF7F1; border:1px solid #D3E9DA; border-radius:var(--radius-lg); padding:20px; font-size:14px;
  white-space:pre-wrap; line-height:1.6; margin-bottom:22px;
}

.nav-buttons{display:flex; gap:12px; margin-top:34px;}

.app.con-barra-flotante{ padding-bottom:96px; }
.cart-floating-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  background:var(--surface); border-top:1px solid var(--border); box-shadow:var(--shadow-hover);
  padding:14px 22px calc(14px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.cart-floating-info{ display:flex; flex-direction:column; }
.cart-floating-label{ font-size:11px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.cart-floating-total{ font-size:20px; font-weight:800; color:var(--accent-deep); font-family:'Plus Jakarta Sans',sans-serif; }
.cart-floating-btn{
  background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:14px 22px;
  font-weight:700; font-size:14.5px; white-space:nowrap; cursor:pointer;
  box-shadow:0 8px 20px rgba(var(--accent-rgb),0.35); transition:transform .25s var(--ease);
}
.cart-floating-btn:hover{ transform:translateY(-2px); }
.btn-primary{background:var(--accent); color:#fff; flex:1; box-shadow:0 10px 24px rgba(var(--accent-rgb),0.35);}
.btn-primary:disabled{opacity:.35; cursor:not-allowed; box-shadow:none; transform:none;}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--border);}
.btn-whatsapp{background:#3FBE73; color:#fff; width:100%; margin-bottom:12px; box-shadow:0 10px 24px rgba(63,190,115,0.3);}
.btn-confirm{background:var(--accent-deep); color:#fff; width:100%;}

.success{ text-align:center; padding:60px 10px; }
.success .emoji{font-size:56px;}
.success h2{margin:18px 0 8px;}
.success p{color:var(--ink-soft); line-height:1.6;}

.loading-screen{ text-align:center; padding:80px 20px; }
.loading-screen p{ color:var(--ink-soft); font-size:14.5px; margin-top:16px; line-height:1.6; }

/* Honeypot anti-spam: invisible para una persona, pero sigue en el DOM para
   que un bot de relleno automático de formularios lo detecte y lo llene. */
.honeypot{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }