:root{
  --rojo:#E02424;
  --rojo2:#DC2626;
  --verde:#16A34A;
  --negro:#111111;
  --g700:#374151;
  --g600:#4B5563;
  --g500:#6B7280;
  --g300:#D1D5DB;
  --g200:#E5E7EB;
  --g100:#F3F4F6;
  --w:#fff;
}

.hc-wrap{ max-width:1100px; margin:32px auto; padding:0 16px; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; color:var(--negro);}

.hc-header{ display:flex; gap:16px; justify-content:space-between; align-items:center; margin-bottom:16px;}
.hc-brand{ display:flex; gap:12px; align-items:center;}
.hc-logo-dot{ width:22px; height:22px; background:var(--rojo); border-radius:50%;}
.hc-header h1{ margin:0; font-size:20px;}
.hc-header small{ color:var(--g600); }
.hc-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.hc-btn{ background:var(--rojo); color:var(--w); border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600;}
.hc-btn:hover{ background:var(--rojo2);}
.hc-btn.ghost{ background:var(--g100); color:var(--negro); border:1px solid var(--g200);}
.hc-btn.wa{ background:#25D366; color:#062;}
.hc-switch{ display:flex; gap:8px; align-items:center; font-weight:600;}
.hc-switch input{ accent-color:var(--rojo);}

.hc-card{ background:var(--w); border:1px solid var(--g200); border-radius:14px; padding:16px; margin:16px 0;}
.hc-card h2{ margin:0 0 12px 0; font-size:18px;}
.hc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
@media (max-width:900px){ .hc-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:540px){ .hc-grid{ grid-template-columns:1fr;} }

label{ display:flex; flex-direction:column; gap:6px; font-size:14px;}
input[type="text"], input[type="number"], input[type="tel"], select{
  border:1px solid var(--g200); border-radius:10px; padding:10px; font-size:14px; background:#fff;
}
.hc-inline{ display:flex; align-items:center; gap:12px; }
.hc-select{ min-width:220px; }
.hc-muted{ color:var(--g500); }

.hc-search{ position:relative; margin:14px 0; }
.hc-search input{ width:100%; padding:12px 12px; border:1px solid var(--g200); border-radius:12px; }
.hc-suggest{ position:absolute; top:44px; left:0; right:0; background:#fff; border:1px solid var(--g200); border-radius:12px; max-height:300px; overflow:auto; z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.08);}
.hc-suggest-item{ padding:10px 12px; border-bottom:1px dashed var(--g100); cursor:pointer;}
.hc-suggest-item:hover{ background:var(--g100);}
.hc-s1{ font-weight:600; }
.hc-s2{ display:flex; gap:10px; color:var(--g600); font-size:12px;}

.hc-progress{ display:flex; align-items:center; gap:10px; padding:8px; border:1px dashed var(--g300); border-radius:10px; background:var(--g100); }
.hc-progress-bar{ height:8px; background:var(--rojo); border-radius:6px; flex:1; }

.hc-details summary{ cursor:pointer; padding:8px 0; font-weight:600; color:var(--g700);}

.hc-table-wrap{ overflow:auto; }
.hc-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:940px;}
.hc-table th, .hc-table td{ border-bottom:1px solid var(--g200); padding:8px; font-size:14px; text-align:left; vertical-align:middle;}
.hc-table thead th{ background:var(--g100); position:sticky; top:0;}
.hc-right{text-align:right;}
.hc-center{text-align:center;}
.hc-icon{ background:#fff; border:1px solid var(--g200); border-radius:8px; padding:6px 8px; cursor:pointer;}

.hc-stepper{ display:flex; align-items:center; gap:6px;}
.hc-stepper input{ width:70px; text-align:center;}
.hc-step{ border:1px solid var(--g200); border-radius:8px; width:30px; height:32px; cursor:pointer; color:#fff; }
.hc-minus{ background:var(--rojo); }
.hc-plus{ background:var(--verde); }

.hc-price-edit{ display:flex; align-items:center; gap:6px; margin-top:6px; color:var(--g600); font-size:12px;}
.hc-num{ width:100%; }

.hc-resumen{ display:grid; gap:8px; max-width:520px; margin-top:12px;}
.hc-resumen > div{ display:flex; justify-content:space-between; padding:6px 8px; background:var(--g100); border:1px solid var(--g200); border-radius:10px;}
.hc-total{ background:#fff; color:#111; border-color:var(--g200); font-weight:700; }

.hc-footer{ text-align:center; color:var(--g600); margin:12px 0;}

/* PRINT */
@media print{
  .hc-actions, .hc-actions-bottom, .hc-switch, #hc-suggest, .hc-details summary, .hc-progress { display:none !important; }
  .hc-seller{ display:none !important; }
  .hc-card{ border:none; }
  .hc-wrap{ margin:0; max-width:none; }
}