/* ============================================================
   SlapYourBrand — Componentes reutilizables (Fase 1)
   Estilos para los helpers en core/helpers_ui.php y los partials
   en templates/components/. Usa los design tokens de :root.
   ============================================================ */

/* === PAGE HEADER === */
.page-header-row { margin-bottom: var(--sp-6); }
.page-header-row .page-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0;
}
.page-header-row .page-sub {
  font-size: var(--fs-base);
  color: var(--muted-light);
  margin: 4px 0 0;
}
.page-header-action { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* === BOTÓN — refinamientos === */
.btn-ico { display: inline-flex; align-items: center; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover { background: var(--bg); border-color: var(--border-strong); }

/* === STAT CARD === */
.stat-card {
  position: relative;
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: 4px;
}
.stat-card .stat-icon {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  font-size: 18px; opacity: .6;
}
.stat-card .stat-value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  line-height: var(--lh-tight);
}
.stat-card .stat-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted-light);
  font-weight: var(--fw-semibold);
}
.stat-card .stat-trend {
  font-size: var(--fs-sm);
  color: var(--success);
  font-weight: var(--fw-medium);
  margin-top: var(--sp-1);
}
.stat-card.stat-success .stat-icon { color: var(--success); }
.stat-card.stat-warning .stat-icon { color: var(--warning); }
.stat-card.stat-danger  .stat-icon { color: var(--danger);  }
.stat-card.stat-brand   .stat-icon { color: var(--brand);   }

/* === EMPTY STATE === */
.empty-state .empty-state-icon {
  font-size: 36px;
  opacity: .35;
  margin-bottom: var(--sp-3);
  display: block;
}

/* === CARD HEADER ACTION === */
.card-header-action { display: flex; align-items: center; gap: var(--sp-2); }

/* === MODAL — tamaños === */
.modal-box.modal-sm { max-width: 380px; }
.modal-box.modal-md { max-width: 560px; }
.modal-box.modal-lg { max-width: 820px; }

/* === BADGES — semánticos extra (mapean a tokens) === */
.badge-success { background: var(--success-l); color: var(--success); }
.badge-warning { background: var(--warning-l); color: var(--warning); }
.badge-danger  { background: var(--danger-l);  color: var(--danger);  }
.badge-info    { background: var(--info-l);    color: var(--info);    }

/* === FORM ROWS UTIL === */
.frow      { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.frow > *  { flex: 1; min-width: 0; }
.frow-2    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.frow-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 640px) {
  .frow-2, .frow-3 { grid-template-columns: 1fr; }
}

/* === UTILIDADES (para reemplazar inline styles en Fase 2) === */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: var(--sp-1); }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-3 { margin-bottom: var(--sp-3); }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-6 { margin-bottom: var(--sp-6); }
.u-flex { display: flex; }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-flex-end { display: flex; justify-content: flex-end; }
.u-flex-center { display: flex; justify-content: center; align-items: center; }
.u-gap-1 { gap: var(--sp-1); }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-gap-4 { gap: var(--sp-4); }
.u-grid { display: grid; }
.u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.u-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.u-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 768px) {
  .u-grid-2, .u-grid-3, .u-grid-4 { grid-template-columns: 1fr; }
}
.u-text-muted { color: var(--muted-light); }
.u-text-sm    { font-size: var(--fs-sm); }
.u-text-xs    { font-size: var(--fs-xs); }
.u-text-right { text-align: right; }
.u-text-center{ text-align: center; }
.u-text-bold  { font-weight: var(--fw-semibold); }
.u-w-100      { width: 100%; }
.u-text-danger  { color: var(--danger); }
.u-text-warning { color: var(--warning); }
.u-text-success { color: var(--success); font-weight: var(--fw-semibold); }
.u-flex-row     { display: flex; align-items: center; gap: var(--sp-2); }
.u-flex-row-sm  { display: flex; align-items: center; gap: 6px; }
.u-flex-row-md  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.u-grid-form    { display: grid; gap: var(--sp-5); max-width: 820px; }
.u-cursor-pointer { cursor: pointer; }

/* ============================================================
   CLIENT VIEW (CRM)
   ============================================================ */
.client-view { max-width: 1100px; margin: 0 auto; }
.client-view .crm-hero { background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%); }

/* Layout principal: contenido + sidebar */
.client-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .client-grid { grid-template-columns: 1fr; } }

/* Bloques (Registrar actividad / Recordatorios / Necesidades / Historial) */
.client-block          { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--sp-4); }
.client-block-head     { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.client-block-head h3  { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--brand-dark); }
.client-block-body     { padding: var(--sp-4) var(--sp-5); }
.client-empty          { color: var(--muted-light); text-align: center; padding: var(--sp-3) 0; font-size: var(--fs-sm); }

/* Followup item */
.fu-item       { display: flex; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg); border-left: 4px solid var(--muted); margin-bottom: var(--sp-2); }
.fu-item.fu-overdue { background: var(--danger-l); border-left-color: var(--danger); }
.fu-item-body  { flex: 1; min-width: 0; }
.fu-item-meta  { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: 4px; }
.fu-item-title { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.fu-item-when  { font-size: var(--fs-sm); color: var(--muted-light); }
.fu-chip       { background: var(--muted-light); color: #fff; border-radius: var(--r-full); padding: 1px 8px; font-size: var(--fs-xs); }
.fu-chip-call    { background: #474F9D; }
.fu-chip-meeting { background: #C08DBF; }
.fu-chip-email   { background: var(--muted); }
.fu-chip-monthly { background: var(--success); }
.fu-chip-special { background: var(--warning); }
.fu-overdue-flag { color: var(--danger); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.fu-recur        { background: var(--border); color: var(--text); border-radius: var(--r-full); padding: 1px 8px; font-size: var(--fs-xs); }

/* Need item */
.need-item     { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-2); }
.need-row1     { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.need-prio     { font-size: 12px; }
.need-prio-high   { color: var(--danger); }
.need-prio-medium { color: var(--warning); }
.need-prio-low    { color: var(--success); }
.need-meta     { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 4px; padding-left: 18px; }
.need-status   { background: var(--border); border-radius: var(--r-full); padding: 1px 8px; font-size: var(--fs-xs); }

/* Activity timeline */
.activity-item   { display: flex; gap: var(--sp-3); padding-bottom: var(--sp-4); }
.activity-rail   { display: flex; flex-direction: column; align-items: center; }
.activity-dot    { width: 32px; height: 32px; border-radius: 50%; background: var(--muted); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); flex-shrink: 0; }
.activity-dot-call    { background: #474F9D; }
.activity-dot-meeting { background: #C08DBF; }
.activity-dot-email   { background: var(--muted); }
.activity-dot-whatsapp{ background: #25D366; }
.activity-dot-note    { background: var(--warning); }
.activity-line   { width: 2px; background: var(--border); flex: 1; margin-top: 4px; }
.activity-body   { flex: 1; padding-top: 4px; }
.activity-meta   { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.activity-when   { font-size: var(--fs-xs); color: var(--muted-light); }
.activity-content{ font-size: var(--fs-base); color: var(--text-soft); margin-top: 4px; }
.activity-future { background: var(--brand-light); color: var(--brand-dark); border-radius: var(--r-full); padding: 2px 8px; font-size: var(--fs-xs); display: inline-block; margin-top: 4px; }

/* Datos del cliente (sidebar) */
.client-data-row { display: flex; gap: var(--sp-2); font-size: var(--fs-base); padding: 4px 0; }
.client-data-lbl { color: var(--muted-light); min-width: 80px; }
.client-data-val { font-weight: var(--fw-medium); word-break: break-all; flex: 1; }
.client-since    { font-size: var(--fs-xs); color: var(--muted-light); margin-top: var(--sp-2); }

/* Pedidos recientes (sidebar) */
.recent-order { background: var(--bg); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-1); font-size: var(--fs-base); }
.recent-order-row { display: flex; justify-content: space-between; }
.recent-order-num { font-weight: var(--fw-semibold); }
.recent-order-total { color: var(--success); font-weight: var(--fw-semibold); }
.recent-order-meta { color: var(--muted-light); font-size: var(--fs-sm); }

/* Acciones rápidas (sidebar) */
.client-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.client-actions .btn { width: 100%; justify-content: center; }

/* Variantes de icon background para KPIs */
.crm-kpi-icon-brand   { background: var(--brand-light); color: var(--brand-dark); }
.crm-kpi-icon-success { background: var(--success-l);   color: var(--success); }
.crm-kpi-icon-info    { background: var(--info-l);      color: var(--info); }
.crm-kpi-icon-muted   { background: #F0EFEB;            color: var(--muted); }

/* Pedido reciente (link wrapper sin estilo de link) */
.recent-order        { display: block; text-decoration: none; color: inherit; }
.recent-order:hover  { background: var(--surface); }

/* Helpers de flex item */
.u-flex-1     { flex: 1; }
.u-flex-shrink-0 { flex-shrink: 0; }
.u-self-end   { align-self: flex-end; }
.u-hidden     { display: none; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-stack    { display: grid; gap: var(--sp-5); }
.dash-greeting { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); }
.dash-greeting h1 { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text); }
.dash-greeting p  { margin: 4px 0 0; color: var(--muted-light); font-size: var(--fs-base); }

/* KPI con border-left de color */
.dash-kpi { padding: var(--sp-5); border-left: 4px solid var(--brand); }
.dash-kpi-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.dash-kpi-label  { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--muted-light); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.dash-kpi-value  { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text); line-height: 1; }
.dash-kpi-sub    { font-size: var(--fs-sm); color: var(--muted-light); margin-top: 6px; }
.dash-kpi-sub.is-alert { color: var(--danger); font-weight: var(--fw-semibold); }
.dash-kpi-icon   { width: 42px; height: 42px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.dash-kpi-brand   { border-left-color: var(--brand); }
.dash-kpi-brand   .dash-kpi-icon { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.dash-kpi-warning { border-left-color: var(--warning); }
.dash-kpi-warning .dash-kpi-icon { background: linear-gradient(135deg, #F59E0B, var(--warning)); }
.dash-kpi-info    { border-left-color: var(--info); }
.dash-kpi-info    .dash-kpi-icon { background: linear-gradient(135deg, #2563EB, var(--info)); }
.dash-kpi-purple  { border-left-color: #7C3AED; }
.dash-kpi-purple  .dash-kpi-icon { background: linear-gradient(135deg, #7C3AED, #6D28D9); }
.dash-kpi-danger  { border-left-color: var(--danger); }
.dash-kpi-danger  .dash-kpi-icon { background: linear-gradient(135deg, #EF4444, var(--danger)); }

/* Sección 2 columnas */
.dash-row-2 { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-4); align-items: start; }
@media (max-width: 900px) { .dash-row-2 { grid-template-columns: 1fr; } }

/* Card con título */
.dash-card-title { display: flex; align-items: center; gap: var(--sp-2); }
.dash-card-title h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); }

/* Sparkline / bar chart */
.dash-bars      { display: flex; align-items: flex-end; gap: var(--sp-2); height: 100px; }
.dash-bar-col   { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dash-bar       { width: 100%; min-height: 5px; border-radius: 5px 5px 0 0; transition: height var(--tr-base); background: var(--border); }
.dash-bar-active { background: var(--brand); }
.dash-bar-val   { font-size: 9px; color: var(--muted); font-weight: var(--fw-semibold); text-align: center; }
.dash-bar-lbl   { font-size: 10px; color: var(--muted-light); }

/* Pipeline progress */
.dash-pip-row { margin-bottom: var(--sp-3); }
.dash-pip-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.dash-pip-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.dash-pip-count { font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: 1px 8px; border-radius: var(--r-full); }
.dash-pip-track { background: var(--bg); border-radius: var(--r-full); height: 5px; overflow: hidden; }
.dash-pip-fill  { height: 100%; border-radius: var(--r-full); }

/* Link "ver todo" */
.dash-link-more { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--brand); font-weight: var(--fw-semibold); text-decoration: none; }
.dash-link-more:hover { text-decoration: underline; }

/* Tabla recientes — fila clickable */
.dash-table tbody tr { cursor: pointer; }
.dash-table .col-num   { font-family: var(--ff-mono); font-size: var(--fs-base); font-weight: var(--fw-bold); }
.dash-table .col-client{ max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-base); }
.dash-table .col-total { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.dash-table .col-date  { font-size: var(--fs-sm); color: var(--muted-light); }

/* Status pill (en tabla) */
.dash-status-pill { font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 3px 9px; border-radius: var(--r-full); white-space: nowrap; }

/* Sidebar dashboard */
.dash-side { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Alert cards (overdue / low stock) */
.dash-alert-card { padding: var(--sp-4); border-left: 4px solid var(--danger); }
.dash-alert-card.is-warning { border-left-color: var(--warning); }
.dash-alert-card h4 { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--danger); }
.dash-alert-card.is-warning h4 { color: var(--warning); }
.dash-alert-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.dash-alert-row:last-of-type { border-bottom: none; }
.dash-alert-row .item-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.dash-alert-row .item-meta { font-size: var(--fs-xs); }
.dash-alert-row .item-amount { font-size: var(--fs-base); font-weight: var(--fw-bold); }
.dash-alert-card.is-warning  .item-meta,
.dash-alert-card.is-warning  .item-amount { color: var(--warning); }
.dash-alert-card  .item-meta,
.dash-alert-card  .item-amount { color: var(--danger); }

/* Stock value */
.dash-stock-val { font-size: 17px; font-weight: var(--fw-bold); }
.dash-stock-val.is-zero { color: var(--danger); }
.dash-stock-val.is-low  { color: var(--warning); }

/* Quick actions */
.dash-quick-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.dash-quick-actions .btn { justify-content: center; gap: 6px; }

/* ============================================================
   ORDERS / TABLAS DE LISTADO
   ============================================================ */

/* Filter tabs (Todos / Pendientes / etc) */
.tab-bar { display: flex; align-items: center; gap: 0; margin-bottom: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 6px; overflow-x: auto; }
.tab-bar .tab { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-sm); text-decoration: none; white-space: nowrap; font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--muted); transition: all var(--tr-fast); }
.tab-bar .tab:hover { color: var(--text); }
.tab-bar .tab.is-active { background: var(--bg); color: var(--text); font-weight: var(--fw-semibold); }
.tab-bar .tab-count { background: var(--border); color: var(--muted); border-radius: var(--r-full); padding: 1px 7px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.tab-bar .tab.is-active .tab-count { background: var(--text); color: var(--surface); }

/* Filter row (search + count) */
.filter-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.search-box { position: relative; flex: 1; min-width: 200px; }
.search-box svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-light); pointer-events: none; }
.search-box input { width: 100%; padding: 8px 12px 8px 34px; border: 1.5px solid var(--border); border-radius: var(--r-md); font-size: 13.5px; outline: none; background: var(--surface); }
.list-count { font-size: var(--fs-base); color: var(--muted-light); white-space: nowrap; }

/* Order row patterns */
.cell-num    { font-weight: var(--fw-bold); font-family: var(--ff-mono); font-size: var(--fs-base); color: var(--text); }
.cell-sub    { font-size: var(--fs-xs); color: var(--muted-light); margin-top: 2px; }
.cell-name   { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text); }
.cell-trunc  { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.cell-total  { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--text); }
.cell-dim    { color: var(--border-strong); }

.client-cell { display: flex; align-items: center; gap: var(--sp-2); }
.client-avatar-sm { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); flex-shrink: 0; }

/* Status pill con punto */
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-full); font-size: 11.5px; font-weight: var(--fw-semibold); white-space: nowrap; }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-quote      { background: #F3F4F6; color: #6B7280; }
.status-pending    { background: var(--warning-l); color: var(--warning); }
.status-approved   { background: var(--info-l);    color: var(--info); }
.status-production { background: #EDE9FE;          color: #7C3AED; }
.status-ready      { background: var(--success-l); color: var(--success); }
.status-delivered  { background: #E5E7EB;          color: #374151; }
.status-cancelled  { background: var(--danger-l);  color: var(--danger); }

/* Priority */
.priority-low    { color: var(--muted); }
.priority-normal { color: var(--info); }
.priority-high   { color: var(--warning); }
.priority-rush   { color: var(--danger); font-weight: var(--fw-bold); }

/* Due date alerts */
.due-date            { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-base); }
.due-date.is-overdue { color: var(--danger); font-weight: var(--fw-semibold); }
.due-date.is-soon    { color: var(--warning); font-weight: var(--fw-semibold); }
.due-date.is-normal  { color: var(--muted); }

/* Action icon buttons inside table */
.row-actions { display: flex; gap: 6px; }
.row-actions .btn-sm { padding: 5px 8px; }

/* Pagination block */
.pagination { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); }
.pagination .page-link { padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); text-decoration: none; color: var(--text); background: var(--surface); font-size: var(--fs-base); }
.pagination .page-link:hover { background: var(--bg); }
.pagination .page-link.active { background: var(--text); color: var(--surface); border-color: var(--text); }
.pagination .page-info { font-size: var(--fs-sm); color: var(--muted-light); margin-left: auto; }

/* ============================================================
   ORDER VIEW — header / stepper / specs / files / activity
   ============================================================ */
.order-view-grid { display: grid; gap: var(--sp-4); max-width: 1060px; }

.order-header { padding: var(--sp-5); }
.order-header-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); }
.order-eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--muted-light); font-weight: var(--fw-bold); margin-bottom: 4px; }
.order-num { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text); font-family: var(--ff-mono); margin: 0; }
.order-meta-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-base); color: var(--muted-light); }

/* Stepper */
.stepper { display: flex; align-items: center; position: relative; }
.stepper-track { position: absolute; top: 16px; left: 0; right: 0; height: 3px; background: var(--border); z-index: 0; }
.stepper-progress { height: 100%; background: var(--brand); transition: width var(--tr-slow); }
.stepper-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; }
.stepper-bullet { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); border: 2.5px solid var(--border); background: var(--surface); color: var(--muted-light); }
.stepper-step.is-done .stepper-bullet    { background: var(--brand); border-color: var(--brand); color: #fff; }
.stepper-step.is-current .stepper-bullet { border-color: var(--brand); color: var(--brand); }
.stepper-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted-light); white-space: nowrap; }
.stepper-step.is-current .stepper-label  { font-weight: var(--fw-bold); color: var(--brand-dark); }

/* Section eyebrow */
.section-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--muted-light); margin-bottom: var(--sp-3); }

/* Spec pill */
.spec-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: var(--bg); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-soft); }
.spec-pill .spec-key { color: var(--muted-light); }
.spec-pill strong { color: var(--text); font-weight: var(--fw-semibold); }
.spec-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Status toggle buttons */
.status-toggle-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.status-toggle { padding: 7px 16px; border-radius: var(--r-md); font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer; border: 2px solid var(--border); background: var(--surface); color: var(--muted); transition: all var(--tr-fast); }
.status-toggle:hover { border-color: var(--text); }
.status-toggle:disabled { cursor: default; }
.status-toggle.is-active-quote      { border-color: #6B7280; background: #F3F4F6; color: #6B7280; }
.status-toggle.is-active-pending    { border-color: var(--warning); background: var(--warning-l); color: var(--warning); }
.status-toggle.is-active-approved   { border-color: var(--info); background: var(--info-l); color: var(--info); }
.status-toggle.is-active-production { border-color: #7C3AED; background: #EDE9FE; color: #7C3AED; }
.status-toggle.is-active-ready      { border-color: var(--success); background: var(--success-l); color: var(--success); }
.status-toggle.is-active-delivered  { border-color: #374151; background: #E5E7EB; color: #374151; }
.status-toggle.is-active-cancelled  { border-color: var(--danger); background: var(--danger-l); color: var(--danger); }

/* Client mini card (within order view) */
.client-mini { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.client-avatar-md { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: var(--fw-bold); flex-shrink: 0; }
.client-mini-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.client-mini-meta { font-size: var(--fs-sm); color: var(--muted-light); }
.kv-row { display: flex; justify-content: space-between; font-size: var(--fs-base); }
.kv-row .kv-key { color: var(--muted-light); }
.kv-row .kv-val { font-weight: var(--fw-medium); color: var(--text); }
.kv-row .kv-val.is-overdue { color: var(--danger); }

.note-box { background: var(--bg); border-radius: var(--r-md); padding: var(--sp-3); font-size: var(--fs-base); color: var(--text-soft); }
.note-box-internal { background: #FEFCE8; border: 1px solid #FEF08A; color: #713F12; }

/* Totals (line items footer) */
.totals-block { padding: var(--sp-3) var(--sp-5); display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); }
.total-row { display: flex; justify-content: flex-end; gap: var(--sp-8); font-size: var(--fs-base); color: var(--muted-light); }
.total-row .v { font-weight: var(--fw-medium); color: var(--text); }
.total-row.is-grand { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--brand-dark); border-top: 2px solid var(--border); padding-top: var(--sp-3); margin-top: 6px; }
.total-row.is-grand .v { color: inherit; font-weight: inherit; }

/* Technique chip in line items */
.tech-chip { font-size: var(--fs-xs); background: var(--bg); padding: 2px 7px; border-radius: 5px; color: var(--text-soft); }

/* Files grid */
.file-grid { padding: var(--sp-4) var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.file-card { display: block; border: 1.5px solid var(--border); border-radius: var(--r-md); overflow: hidden; width: 140px; text-decoration: none; transition: box-shadow var(--tr-fast); color: inherit; }
.file-card:hover { box-shadow: var(--sh-md); }
.file-thumb     { width: 100%; height: 90px; object-fit: cover; display: block; }
.file-thumb-fb  { height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); gap: 5px; color: var(--muted-light); }
.file-ext       { font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; }
.file-meta      { padding: 7px 10px; background: var(--surface); }
.file-name      { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-bottom    { margin-top: 3px; display: flex; align-items: center; justify-content: space-between; }
.file-cat       { font-size: 10px; font-weight: var(--fw-bold); }
.file-cat-artwork   { color: var(--info); }
.file-cat-mockup    { color: #7C3AED; }
.file-cat-reference { color: var(--warning); }
.file-cat-approval  { color: var(--success); }
.file-cat-other     { color: var(--muted); }
.file-size      { font-size: 10px; color: var(--border-strong); }

/* Activity timeline (order view variant) */
.timeline { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: flex; gap: var(--sp-3); }
.timeline-item + .timeline-item { padding-top: var(--sp-4); border-top: 1px solid var(--border); margin-top: var(--sp-4); }
.timeline-bullet { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--muted-light); }
.timeline-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-base); }
.timeline-user { font-weight: var(--fw-semibold); color: var(--text); }
.timeline-text { color: var(--muted-light); }
.timeline-when { font-size: var(--fs-xs); color: var(--muted-light); margin-top: 3px; }

/* Email preview modal (specific) */
.email-modal { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.55); overflow-y: auto; padding: 24px 16px; }
.email-modal-box { background: var(--surface); border-radius: var(--r-lg); max-width: 700px; margin: 0 auto; overflow: hidden; box-shadow: var(--sh-xl); }
.email-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--bg); }
.email-modal-foot { display: none; padding: var(--sp-4) 22px; border-top: 1px solid var(--border); background: var(--bg); align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }
.email-modal-foot.is-open { display: flex; }

/* ============================================================
   ORDER FORM — line items, technique pills, dropzone, toggles
   ============================================================ */
.order-form-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-5); align-items: start; max-width: 1100px; }
@media (max-width: 860px) { .order-form-grid { grid-template-columns: 1fr; } }

/* Sub-card (consistente con .card pero más compacto) */
.ocard      { background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--border); overflow: hidden; margin-bottom: var(--sp-4); }
.ocard-head { padding: 13px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--sp-2); }
.ocard-head h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); margin: 0; }
.ocard-body { padding: 18px; }
.ocard-link-action { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--brand); font-size: var(--fs-sm); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 3px; padding: 0; text-decoration: none; }

/* Line items table */
.items-tbl { width: 100%; border-collapse: collapse; }
.items-tbl th { padding: 7px 8px; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted-light); border-bottom: 2px solid var(--border); white-space: nowrap; text-align: left; }
.items-tbl th.r { text-align: right; }
.items-tbl td { padding: 5px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.items-tbl tbody tr:last-child td { border-bottom: none; }

.ci { padding: 8px 10px; border: 1.5px solid transparent; border-radius: var(--r-sm); font-size: var(--fs-base); outline: none; width: 100%; background: transparent; transition: all var(--tr-fast); font-family: inherit; }
.ci:hover  { border-color: var(--border); }
.ci:focus  { border-color: var(--brand); background: var(--surface); }
.ci.r      { text-align: right; }
.ci-tech   { padding: 7px 6px; font-size: var(--fs-sm); }

.del-row { background: none; border: none; cursor: pointer; color: var(--border-strong); font-size: 20px; padding: 4px 6px; border-radius: var(--r-xs); transition: color var(--tr-fast); line-height: 1; }
.del-row:hover { color: var(--danger); }

.add-line { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: 1.5px dashed var(--border); border-radius: var(--r-sm); background: transparent; font-size: var(--fs-base); color: var(--muted-light); cursor: pointer; width: 100%; transition: all var(--tr-fast); margin-top: 10px; }
.add-line:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }

/* Totals (form variant) */
.tot-row { display: flex; justify-content: flex-end; gap: 28px; font-size: var(--fs-base); padding: 3px 0; }
.tot-row span:first-child { color: var(--muted-light); min-width: 90px; text-align: right; }
.tot-row span:last-child  { min-width: 80px; text-align: right; font-weight: var(--fw-medium); }
.tot-grand { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--brand-dark); border-top: 2px solid var(--border); padding-top: 10px; margin-top: 6px; }
.tax-input { width: 42px; border: none; border-bottom: 1.5px solid var(--border); padding: 1px 4px; font-size: var(--fs-base); text-align: center; outline: none; background: transparent; }

/* Technique radio pills */
.tech-radio-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--sp-4); }
.tech-radio { cursor: pointer; }
.tech-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.tech-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: var(--r-md); border: 2px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: var(--fw-medium); color: var(--text-soft); transition: all var(--tr-fast); user-select: none; }
.tech-pill.on { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }

.specs-box { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); }

/* Generate invoice toggle */
.gen-inv-box { border: 2px dashed var(--border); border-radius: var(--r-md); padding: 14px 16px; cursor: pointer; transition: all var(--tr-base); user-select: none; }
.gen-inv-box.on { border-color: var(--brand); background: var(--brand-light); border-style: solid; }
.gen-inv-row { display: flex; align-items: center; gap: 10px; }
.gen-inv-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gen-inv-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text); }
.gen-inv-sub { font-size: var(--fs-sm); color: var(--muted-light); margin-top: 2px; }
.gen-inv-toggle { width: 38px; height: 22px; border-radius: 11px; background: var(--border); position: relative; transition: background var(--tr-base); }
.gen-inv-toggle .thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left var(--tr-base); }
.gen-inv-box.on .gen-inv-toggle { background: var(--brand); }
.gen-inv-box.on .gen-inv-toggle .thumb { left: 19px; }

/* Dropzone */
.dropzone { border: 2px dashed var(--border); border-radius: var(--r-md); padding: 18px 12px; text-align: center; cursor: pointer; transition: border-color var(--tr-base); }
.dropzone.is-drag { border-color: var(--brand); background: var(--brand-light); }
.dropzone svg { color: var(--muted-light); margin: 0 auto 8px; display: block; }
.dropzone p { font-size: var(--fs-sm); color: var(--muted-light); margin: 0; }
.dropzone p + p { font-size: var(--fs-xs); color: var(--border-strong); margin-top: 3px; }

/* File preview thumbs */
.file-thumb-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.file-thumb-item { border: 1.5px solid var(--border); border-radius: var(--r-sm); overflow: hidden; width: 64px; text-align: center; }
.file-thumb-item img { width: 100%; height: 46px; object-fit: cover; display: block; }
.file-thumb-item .placeholder { height: 46px; display: flex; align-items: center; justify-content: center; background: var(--bg); font-size: 18px; }
.file-thumb-item .name { padding: 2px 4px; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

.existing-files-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.existing-file-card { border: 1.5px solid var(--border); border-radius: var(--r-md); overflow: hidden; width: 72px; position: relative; }
.existing-file-card img { width: 100%; height: 52px; object-fit: cover; display: block; }
.existing-file-card .placeholder { display: flex; align-items: center; justify-content: center; height: 52px; background: var(--bg); }
.existing-file-card .name { padding: 3px 5px; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.existing-file-card .delete { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.5); color: #fff; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; text-decoration: none; line-height: 1; }

/* Quick-create modals (form) — usar overlay+box compartido */
.qc-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 460px; max-width: calc(100vw - 32px); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-xl); z-index: 1001; overflow: hidden; }
.qc-modal-product { width: 480px; }
.qc-modal-head { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: var(--fs-base); font-weight: var(--fw-bold); }
.qc-modal-head .close { background: rgba(255,255,255,.2); border: none; cursor: pointer; color: #fff; width: 26px; height: 26px; border-radius: 5px; font-size: 16px; }
.qc-modal-head-brand   { background: var(--brand); }
.qc-modal-head-purple  { background: #7F77DD; }
.qc-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.qc-modal-foot { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.qc-error { display: none; color: var(--danger); font-size: var(--fs-sm); background: var(--danger-l); padding: 8px 12px; border-radius: var(--r-sm); }
.qc-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; backdrop-filter: blur(2px); }

/* Toast */
.toast { position: fixed; bottom: 24px; right: 24px; background: #1E293B; color: #fff; padding: 11px 16px; border-radius: var(--r-md); font-size: var(--fs-base); font-weight: var(--fw-medium); z-index: 9999; box-shadow: var(--sh-lg); transition: opacity var(--tr-base); }

/* SanMar button */
.sanmar-btn { display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: linear-gradient(135deg, #1E40AF, var(--info)); color: #fff; border: none; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; flex-shrink: 0; text-decoration: none; }
.sanmar-btn-disabled { background: var(--bg); color: var(--muted-light); border: 1.5px dashed var(--border-strong); cursor: pointer; }

/* Submit row */
.form-submit-stack .btn { width: 100%; justify-content: center; }
.form-submit-stack .btn + .btn { margin-top: var(--sp-2); }
.form-submit-primary { padding: 13px; font-size: var(--fs-md); font-weight: var(--fw-bold); }

/* ============================================================
   INVOICE — vista de documento (pantalla y print)
   ============================================================ */
.invoice-page { max-width: 820px; }
.invoice-actions { display: flex; gap: 10px; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.invoice-actions form { margin: 0; }

.invoice-doc { overflow: hidden; }
.invoice-head { background: var(--brand-dark); color: #fff; padding: 28px 32px; }
.invoice-head-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--sp-4); }
.invoice-head img.logo { height: 48px; object-fit: contain; filter: brightness(0) invert(1); display: block; margin-bottom: 8px; }
.invoice-co-name { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin-bottom: 4px; }
.invoice-co-meta { font-size: var(--fs-sm); opacity: .7; }
.invoice-num-block { text-align: right; }
.invoice-eyebrow-light { font-size: var(--fs-xs); opacity: .6; text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.invoice-num     { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
.invoice-date    { font-size: var(--fs-sm); opacity: .75; margin-top: 4px; }

.invoice-billto { padding: var(--sp-6) 32px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); border-bottom: 1px solid var(--border); }
.invoice-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--muted); margin-bottom: var(--sp-2); }
.invoice-billto .name { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.invoice-billto .meta { color: var(--muted); font-size: var(--fs-base); }
.invoice-po { font-size: var(--fs-base); font-family: var(--ff-mono); }

.invoice-items-wrap { padding: 0 32px; }
.invoice-items-tbl { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; }
.invoice-items-tbl thead th { padding: 10px 8px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); border-bottom: 2px solid var(--border); text-align: left; }
.invoice-items-tbl thead th.r { text-align: right; }
.invoice-items-tbl tbody td { padding: 10px 8px; border-bottom: 1px solid var(--bg); font-size: var(--fs-base); }
.invoice-items-tbl tbody td.r { text-align: right; }
.invoice-items-tbl tbody td.is-total { font-weight: var(--fw-medium); }

.invoice-totals { padding: 0 32px var(--sp-6); display: flex; justify-content: flex-end; }
.invoice-totals-box { min-width: 240px; }
.invoice-tot-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: var(--fs-base); color: var(--muted); }
.invoice-tot-grand { display: flex; justify-content: space-between; padding: 10px 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--brand-dark); border-top: 2px solid var(--border); margin-top: 4px; }
.invoice-paid-stamp { text-align: center; margin-top: var(--sp-2); padding: 6px var(--sp-4); background: var(--success-l); color: var(--success); border-radius: var(--r-sm); font-weight: var(--fw-semibold); font-size: var(--fs-base); }

.invoice-notes { padding: var(--sp-4) 32px var(--sp-6); border-top: 1px solid var(--border); font-size: var(--fs-base); color: var(--muted); font-style: italic; }

@media print {
  .sidebar, .topbar, .btn, .invoice-actions { display: none !important; }
  .invoice-doc { box-shadow: none; border: none; }
  body { background: #fff; }
}

/* ============================================================
   INVOICE FORM (builder con preview)
   ============================================================ */
.inv-builder { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-5); align-items: start; max-width: 1200px; }
@media (max-width: 900px) { .inv-builder { grid-template-columns: 1fr; } }

.qb-card      { background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--border); overflow: hidden; margin-bottom: var(--sp-4); }
.qb-card-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.qb-card-head h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--brand-dark); }
.qb-body      { padding: 18px 20px; }
.qb-body.is-flush { padding-bottom: 0; }

/* Form rows / fields */
.fl       { display: flex; flex-direction: column; gap: 4px; }
.fl label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.fl input, .fl select, .fl textarea {
  padding: 9px 11px; border: 1.5px solid var(--border); border-radius: 7px;
  font-size: var(--fs-base); outline: none; width: 100%; transition: border-color var(--tr-fast); background: var(--surface);
}
.fl input:focus, .fl select:focus, .fl textarea:focus { border-color: var(--brand); }
.fl input:disabled { background: var(--bg); color: var(--muted); }

/* Line items table */
.items-table     { width: 100%; border-collapse: collapse; }
.items-table th  { padding: 8px 10px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); border-bottom: 2px solid var(--border); text-align: left; white-space: nowrap; }
.items-table th.r { text-align: right; }
.items-table td  { padding: 6px 4px; border-bottom: 1px solid var(--bg); vertical-align: middle; }
.items-table .td-num input { text-align: right; }
.items-table tr:last-child td { border-bottom: none; }
.cell-input { padding: 7px 9px; border: 1.5px solid transparent; border-radius: var(--r-sm); font-size: var(--fs-base); outline: none; width: 100%; background: transparent; transition: all var(--tr-fast); }
.cell-input:hover { border-color: var(--border); }
.cell-input:focus { border-color: var(--brand); background: var(--surface); }

.add-line-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: 1.5px dashed var(--border); border-radius: 7px; background: transparent; font-size: var(--fs-base); color: var(--muted); cursor: pointer; width: 100%; transition: all var(--tr-fast); margin-top: 10px; }
.add-line-btn:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); }

/* Totals */
.totals-block { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.total-row    { display: flex; justify-content: flex-end; gap: 32px; font-size: var(--fs-base); padding: 3px 0; }
.total-row span:first-child { color: var(--muted); min-width: 120px; text-align: right; }
.total-row span:last-child  { min-width: 80px; text-align: right; font-weight: var(--fw-medium); }
.total-grand  { font-size: 17px; font-weight: var(--fw-bold); color: var(--brand-dark); border-top: 2px solid var(--border); padding-top: 10px; margin-top: 6px; }

/* Preview card (invoice form sidebar) */
.preview-header  { background: var(--brand-dark); color: #fff; padding: var(--sp-5); border-radius: var(--r-md) var(--r-md) 0 0; }
.preview-logo    { height: 36px; object-fit: contain; filter: brightness(0) invert(1); margin-bottom: 8px; display: block; }
.preview-company { font-size: var(--fs-xs); opacity: .65; margin-top: 4px; }
.preview-body    { padding: var(--sp-4) var(--sp-5); }
.preview-to      { font-size: var(--fs-sm); margin-bottom: 12px; }
.preview-to strong { display: block; margin-bottom: 2px; }
.preview-table   { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.preview-table th{ border-bottom: 1px solid #eee; padding: 5px 4px; color: #999; font-weight: var(--fw-semibold); font-size: 10px; text-transform: uppercase; }
.preview-table td{ padding: 5px 4px; border-bottom: 1px solid var(--bg); }
.preview-table td:last-child, .preview-table th:last-child { text-align: right; }
.preview-totals  { margin-top: 10px; font-size: var(--fs-sm); }
.preview-total-row { display: flex; justify-content: flex-end; gap: 24px; padding: 2px 0; color: var(--muted); }
.preview-grand   { font-weight: var(--fw-bold); color: var(--brand-dark); font-size: var(--fs-base); border-top: 1px solid #eee; padding-top: 6px; margin-top: 4px; }

/* Catalog add box */
.catalog-add-box { margin: 12px 0 0; padding: 12px 14px; background: var(--bg); border-radius: var(--r-md); }
.catalog-add-eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* Quick toggle row (Discount/Tax checkboxes) */
.qb-toggles { display: flex; gap: 8px; align-items: center; }
.qb-toggle  { font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* Quick-create client button (plus) */
.qb-plus-btn { padding: 9px 12px; background: var(--brand-light); color: var(--brand-dark); border: 1.5px solid var(--brand); border-radius: 7px; font-size: var(--fs-base); cursor: pointer; white-space: nowrap; font-weight: var(--fw-semibold); }

/* Client select with plus button row */
.qb-select-row { display: flex; gap: 6px; align-items: center; }
.qb-select-row select { flex: 1; }
.client-preview { padding: 10px 14px; background: var(--bg); border-radius: 7px; font-size: var(--fs-base); color: var(--muted); }

/* Modal (invoice form local) — usar overlay genérico */