/* Baseline de interfaz (ayer 11:00): limpio, responsivo, sin forzar mayúsculas ni colores +/- */
:root{
  --hc-bg:#0f0f10;         /* fondo oscuro */
  --hc-card:#1a1b1e;       /* tarjetas */
  --hc-soft:#2a2b2f;
  --hc-text:#e9e9ea;
  --hc-muted:#a9abb3;
  --hc-accent:#c53030;     /* rojo oscuro para acciones */
  --hc-ok:#0ea35a;         /* verde sutil para confirmaciones */
  --hc-border:#2b2d31;
}

.hc-wrap{ color:var(--hc-text); background:var(--hc-bg); padding:24px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.hc-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:16px; }
.hc-brand{ display:flex; align-items:center; gap:10px; }
.hc-logo-dot{ width:14px; height:14px; border-radius:50%; background:var(--hc-accent); box-shadow:0 0 0 2px rgba(197,48,48,.25); }
.hc-actions{ display:flex; align-items:center; gap:10px; }

.hc-btn{ background:var(--hc-accent); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; }
.hc-btn:hover{ opacity:.95; }
.hc-btn.ghost{ background:transparent; border:1px solid var(--hc-border) }

.hc-switch{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--hc-muted) }
.hc-switch input{ transform:translateY(1px); }

.hc-card{ background:var(--hc-card); border:1px solid var(--hc-border); border-radius:14px; padding:16px; margin-bottom:14px; }
.hc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.hc-grid label{ display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--hc-muted) }
.hc-grid input, .hc-grid select, .hc-grid textarea{ background:#121214; color:var(--hc-text); border:1px solid var(--hc-border); border-radius:10px; padding:10px; }

.hc-flex-between{ display:flex; justify-content:space-between; align-items:end; gap:12px; }
.hc-inline{ display:flex; gap:8px; align-items:center; }
.hc-muted{ color:var(--hc-muted); font-size:12px; }
.hc-search{ position:relative; }
.hc-suggest{ position:absolute; top:100%; left:0; right:0; z-index:30; background:#fff; color:#111; border-radius:10px; box-shadow:0 12px 24px rgba(0,0,0,.2); margin-top:6px; }
.hc-suggest-item{ padding:10px 12px; border-bottom:1px solid #eee; cursor:pointer; }
.hc-suggest-item:last-child{ border-bottom:0; }
.hc-s1{ font-weight:600; }
.hc-s2{ display:flex; gap:10px; font-size:12px; color:#666; }

.hc-progress{ display:flex; align-items:center; gap:10px; margin:10px 0; }
.hc-progress-bar{ height:6px; background:var(--hc-ok); border-radius:6px; width:0; }
.hc-progress-text{ color:var(--hc-muted); font-size:12px; }

.hc-table-wrap{ overflow:auto; }
.hc-table{ width:100%; border-collapse:collapse; }
.hc-table th, .hc-table td{ border-bottom:1px solid var(--hc-border); padding:10px; vertical-align:middle; }
.hc-table thead th{ background:var(--hc-soft); position:sticky; top:0; z-index:1; }
.hc-text{ width:100%; background:#121214; color:var(--hc-text); border:1px solid var(--hc-border); border-radius:8px; padding:8px; }
.hc-num{ width:110px; background:#121214; color:var(--hc-text); border:1px solid var(--hc-border); border-radius:8px; padding:8px; }
.hc-price-edit{ display:flex; align-items:center; gap:6px; }

.hc-stepper{ display:flex; align-items:center; gap:6px; }
.hc-step{ width:32px; height:32px; border-radius:8px; border:1px solid var(--hc-border); background:#151518; color:#fff; }
.hc-minus{ /* baseline sin colores forzados */ }
.hc-plus{  /* baseline sin colores forzados */ }

.hc-right{ text-align:right; }
.hc-center{ text-align:center; }
.hc-icon{ background:#1c1d21; border:1px solid var(--hc-border); color:#ddd; border-radius:8px; padding:4px 8px; }

.hc-resumen{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px; }
.hc-resumen > div{ display:flex; justify-content:space-between; border:1px dashed var(--hc-border); border-radius:8px; padding:10px; }
.hc-total strong{ font-size:18px; }

.hc-actions-bottom{ display:flex; gap:10px; justify-content:flex-end; }
.hc-btn.wa{ background:#25D366; color:#111; }

.hc-footer{ text-align:center; color:var(--hc-muted); margin-top:14px; }

.hc-details summary{ cursor:pointer; color:var(--hc-muted); }
.hc-inline-ck{ display:flex; gap:8px; align-items:center; color:var(--hc-muted); }

.hc-row-flash{ animation:hcFlash .45s ease-out; }
@keyframes hcFlash{
  from{ background:rgba(37,99,235,.18); }
  to{ background:transparent; }
}

@media (max-width: 920px){
  .hc-grid{ grid-template-columns:1fr; }
  .hc-resumen{ grid-template-columns:1fr; }
}