/* === Base === */
:root{
  --white:#fff; --black:#0f172a; --ink:#111827; --muted:#6b7280;
  --line:#e5e7eb; --accent:#f59e0b; --accent-200:#fde68a; --bg:#f8fafc;
  --radius:14px; --shadow:0 6px 18px rgba(0,0,0,.06);
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--black);
  font:400 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
}
body.no-scroll{ overflow:hidden; } /* evita scroll del fondo cuando hay modal abierto */

/* Header con acento amarillo */
.site-header{
  background:#fff; position:sticky; top:0; z-index:10;
  border-bottom:4px solid var(--accent);
}
.site-header .brand{ display:flex; align-items:center; gap:18px; padding:18px 20px; }
.site-header img{ width:88px; height:88px; object-fit:contain; } /* ↑ logo un poco más grande */
.site-header h1{ margin:0; font:800 22px/1.15 system-ui; color:var(--ink); }
.site-header p{ margin:.25rem 0 0; color:var(--muted); }

/* Layout */
main{ padding:20px; max-width:980px; margin:0 auto; }
.card{
  background:#fff; border:2px solid var(--accent-200); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; margin:16px 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card:hover{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-200) inset, var(--shadow); }
.card h2{ margin:2px 0 8px; font-size:18px; color:var(--ink); }

/* Grid */
.grid{ display:grid; gap:12px; }
.products{ grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.formgrid{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.confirmgrid{ grid-template-columns: 280px 1fr; align-items:end; gap:12px; }
@media (max-width:720px){ .confirmgrid{ grid-template-columns:1fr; } }

/* Product item */
.item{
  display:grid; gap:10px; padding:12px; border:2px dashed var(--line); border-radius:12px;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.item.checked{ border-color:var(--accent); background:#fff7ed; box-shadow:0 0 0 3px var(--accent-200) inset; }
.item .head{ display:flex; align-items:center; gap:10px; }
.item .title{ font-weight:700 }
.item .sub{ color:var(--muted); font-size:14px; }

/* Fila interna: fija overflow de "Otro" */
.row{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; }
.item input[type="text"]{ width:100%; }

/* Cantidades y botones */
.qty{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.qty input[type="number"]{ width:90px; padding:6px 8px; border-radius:10px; border:1px solid var(--line); }
.btn-qty{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:4px 10px; cursor:pointer; }
.btn-qty[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-qty:hover:not([disabled]){ background:#fff7ed; border-color:var(--accent); }

/* Resumen */
.sumario{ display:flex; justify-content:flex-end; gap:8px; align-items:center; color:var(--muted); }

/* Inputs */
label{ display:grid; gap:6px; }
input[type="text"],input[type="email"],input[type="tel"],input[type="date"],select{
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; font:inherit; background:#fff;
}
input:focus, select:focus{ outline:2px solid var(--accent-200); border-color:var(--accent); }

/* Uploader moderno */
.uploader{
  display:grid; gap:10px; border:2px dashed var(--line);
  border-radius:12px; padding:20px; background:#f9fafb; color:#374151;
  align-items:center; justify-items:center; text-align:center;
}
.uploader.hover{ background:#fff7ed; border-color:var(--accent); }
.uploader .actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; }
.btn{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px; cursor:pointer; }
.btn.file{ border:2px solid var(--accent); background:#fff7ed; font-weight:700; }
.btn.file:hover{ filter:brightness(1.03); }
.uploader small{ color:var(--muted); }

/* Switch + Segmented */
.switch{ display:flex; align-items:center; gap:8px; }
.segmented{ display:inline-grid; grid-auto-flow:column; background:#f3f4f6; border-radius:12px; border:1px solid var(--line); }
.seg{
  appearance:none; background:none; border:none; padding:10px 14px;
  cursor:pointer; font-size:15px;
}
.seg[aria-pressed="true"]{ background:#fff; border-radius:10px; box-shadow:0 0 0 2px var(--accent-200) inset; }

/* Destacado de beneficios claves (inline) */
.highlight{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px;
  padding:10px 12px; background:#fff7ed; border:1px dashed var(--accent); border-radius:12px;
}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid var(--accent); background:#fff; font-weight:700;
}

/* Tabla comparativa (solo en modal) */
.benefits{ width:100%; border-collapse:collapse; margin:6px 0 0; border:1px solid var(--line); }
.benefits th, .benefits td{ border:1px solid var(--line); padding:8px 10px; vertical-align:top; background:#fff; }
.benefits thead th{ background:#fff7ed; }

/* Botones principales */
.btn.primary{ background:var(--accent); color:#111; border-color:var(--accent); font-weight:700; }
.btn.primary:hover{ filter:brightness(1.06); }

/* Checks */
.check{ display:flex; align-items:flex-start; gap:10px; }
.check input{ margin-top:4px }

/* ==== Modales: centrado fijo + tamaño y scroll ==== */
dialog:not([open]){ display:none; }

dialog{
  position: fixed;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  margin:0;
  border:none; border-radius:18px; overflow:hidden; padding:0;
  width:min(820px, 96vw);
  max-height:92vh;
  display:flex; flex-direction:column;
  z-index: 9999;
  box-shadow:0 28px 90px rgba(0,0,0,.35);
}
dialog::backdrop{ background:rgba(0,0,0,.45); }
dialog > header{
  padding:14px 18px; background:#fff; border-bottom:1px solid var(--line); position:relative;
}
dialog > header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:4px; background:var(--accent);
}
dialog > header h3{ margin:0; font:800 20px/1.2 system-ui; color:var(--ink); }
dialog > article{
  padding:18px; background:#fff; color:#1f2937;
  overflow:auto; min-height:0;
}
dialog > article p{ margin:0 0 10px; }
dialog > article ul{ margin:0 0 10px 18px; }
dialog > footer{ padding:12px 18px; background:#fff; border-top:1px solid var(--line); display:flex; justify-content:flex-end; }
.icon.close{ background:none; border:none; font-size:24px; cursor:pointer; position:absolute; right:10px; top:8px; }
.link{ background:none; border:none; color:#111827; text-decoration:underline; cursor:pointer; }
@media (max-width:480px){
  dialog{ width:96vw; border-radius:14px; }
}

/* ==== Textarea moderna (Indicaciones del cliente) ==== */
.textarea-card{
  position:relative;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:#f9fafb;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  padding:10px 12px 28px;
}
.textarea-card:focus-within{
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 3px var(--accent-200) inset;
}
.textarea-card textarea{
  width:100%; border:none; outline:none; background:transparent;
  font:inherit; line-height:1.5; resize:none; min-height:120px;
}
.textarea-card .hint{
  position:absolute; right:10px; bottom:6px; font-size:12px; color:#6b7280;
}

/* Ayuda (mensaje al lado del botón) */
.help-inline{ color:var(--muted); font-size:14px; margin-left:10px; display:inline-block; vertical-align:middle; }

/* Accesibilidad */
.aria-live { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }