/* ─── RESET & TOKENS ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Variables: ver tokens.css */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
button, input, select, textarea { font-family: inherit; }

/* ─── BG GRID ────────────────────────────────────────────── */
.bg-grid { display: none; }

/* ─── HEADER ─────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px;
  background: rgba(244,245,247,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 36px; height: 36px;
  background: var(--accent); color: var(--on-accent);
  border-radius: 8px; display: grid; place-items: center;
  font-weight: 500; font-size: 13px;
}
.logo-text { font-weight: var(--weight-semibold); font-size: var(--text-md); letter-spacing: -.01em; }
.header-nav { display: flex; align-items: center; gap: 8px; }
.nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); }
.nav-dot.active { background: var(--accent); }
.nav-label { font-size: 12px; color: var(--muted); }

/* ─── MAIN ───────────────────────────────────────────────── */
.main {
  position: relative; z-index: 1;
  max-width: 860px; margin: 0 auto;
  padding: 48px 24px 80px;
}

/* ─── STEPS BAR ──────────────────────────────────────────── */
.steps-bar {
  display: flex; align-items: center; gap: 0;
  margin-bottom: var(--space-6);
}
.step {
  display: flex; align-items: center; gap: 8px;
  opacity: .55; transition: opacity .4s;
}
.step.active { opacity: 1; }
.step.done { opacity: .8; }
.step-num {
  font-size: 12px; font-weight: 500; color: var(--accent-fg);
  font-family: var(--font-sans);
}
.step-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.step.active .step-label { color: var(--text); }
.step-line {
  flex: 1; height: 1px;
  background: var(--border2);
  margin: 0 12px;
}

/* ─── PANEL ──────────────────────────────────────────────── */
.panel { display: none; animation: fadeUp .4s ease; }
.panel.active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.panel-header { margin-bottom: var(--space-5); }
.panel-title {
  font-size: var(--text-xl); font-weight: var(--weight-semibold);
  line-height: 1.2; letter-spacing: -.02em; color: var(--text);
}
.panel-title em { font-style: normal; color: inherit; }
.panel-sub { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-base); }

/* ─── TYPE CARDS ─────────────────────────────────────────── */
.type-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 28px;
}
.type-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
}
.type-card:hover { border-color: var(--border2); }
.type-card.selected {
  border-color: var(--accent);
  background: rgba(31,79,245,.04);
}
.type-icon { font-size: 24px; }
.type-info { flex: 1; }
.type-info strong { display: block; font-size: 15px; margin-bottom: 4px; }
.type-info span { font-size: 12px; color: var(--muted); line-height: 1.5; }
.type-check {
  width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--border2);
  display: grid; place-items: center;
  font-size: 12px; color: transparent;
  transition: all .2s;
}
.type-card.selected .type-check {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent);
}

/* ─── DROP ZONE ──────────────────────────────────────────── */
.drop-zone {
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  margin-bottom: 28px;
  transition: border-color .2s, background .2s;
  overflow: hidden;
}
.drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(31,79,245,.04);
}
.drop-inner {
  padding: 48px 32px;
  text-align: center;
}
.drop-icon { color: var(--muted); margin-bottom: 16px; }
.drop-text { font-size: 15px; margin-bottom: 6px; }
.drop-sub { font-size: 12px; color: var(--muted); }
.drop-hint { font-size: 12px; color: var(--muted); margin-top: 10px; }
.link-btn {
  background: none; border: none; color: var(--accent-fg);
  cursor: pointer; font-family: var(--font-sans); font-size: 12px;
  text-decoration: underline;
}
.drop-loaded { padding: 20px 24px; }
.file-info {
  display: flex; align-items: center; gap: 14px;
  background: rgba(31,79,245,.06);
  border: 1px solid rgba(31,79,245,.2);
  border-radius: 8px; padding: 14px 18px;
}
.file-icon { font-size: 24px; }
.file-info strong { display: block; font-size: 14px; }
.file-info span { font-size: 12px; color: var(--muted); }
.file-info div { flex: 1; }
.icon-btn {
  background: none; border: 1px solid var(--border);
  color: var(--muted); width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer; font-size: 12px;
  transition: all .2s;
}
.icon-btn:hover { border-color: var(--danger); color: var(--danger); }

/* ─── CONFIG ROW ─────────────────────────────────────────── */
.config-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  margin-bottom: 32px;
}
.config-label {
  display: block; font-size: 11px;
 color: var(--muted); margin-bottom: 6px;
}
.config-input {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: var(--font-sans); font-size: 12px;
  padding: 10px 14px; outline: none;
  transition: border-color .2s;
}
.config-input:focus { border-color: var(--accent2); }
.config-input::placeholder { color: var(--muted); }

/* ─── BUTTONS ────────────────────────────────────────────── */
.panel-footer {
  display: flex; justify-content: flex-end; gap: 12px;
  margin-top: 32px;
}
.btn-primary {
  background: var(--accent); color: var(--on-accent);
  border: none; border-radius: 8px;
  padding: 12px 28px; font-family: var(--font-sans); font-size: 13px;
  font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: opacity .2s, transform .1s;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary:active:not(:disabled) { transform: scale(.97); }
.btn-primary:disabled { opacity: .3; cursor: not-allowed; }
.btn-secondary {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 24px; font-family: var(--font-sans); font-size: 13px;
  cursor: pointer; transition: border-color .2s;
}
.btn-secondary:hover { border-color: var(--border2); }
.arrow { font-size: 16px; }

/* ─── PREVIEW META ───────────────────────────────────────── */
.preview-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 24px;
}
.meta-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 14px; font-size: 12px;
}
.meta-chip strong { color: var(--accent2); }

/* ─── TABS ───────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.tab {
  background: none; border: 1px solid var(--border);
  color: var(--muted); border-radius: 6px;
  padding: 8px 16px; font-family: var(--font-sans); font-size: 12px;
  cursor: pointer; transition: all .2s;
}
.tab.active { border-color: var(--accent); color: var(--accent-fg); }
.tab-content { display: block; }
.tab-content.hidden { display: none; }

/* ─── TABLE ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
thead th {
  background: var(--surface); padding: 10px 14px;
  text-align: left; font-size: 11px;
 color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap; position: sticky; top: 0;
}
tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr:hover td { background: #f7f8fa; }
tbody tr:last-child td { border-bottom: none; }
.num-cell { text-align: right; font-variant-numeric: tabular-nums; color: var(--accent2); }
.code-cell { color: var(--muted); font-size: 11px; }
.formula-tag {
  display: inline-block; background: rgba(31,79,245,.1);
  border: 1px solid rgba(31,79,245,.2);
  color: var(--accent-fg); border-radius: 4px;
  padding: 2px 6px; font-size: 11px;
}

/* ─── VALIDATION ─────────────────────────────────────────── */
.validation-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 28px;
}
.val-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  text-align: center;
}
.val-card.ok { border-color: rgba(18,128,92,.2); }
.val-card.warn { border-color: rgba(180,83,9,.2); }
.val-card.err { border-color: rgba(198,40,40,.2); }
.val-num { font-family: var(--font-sans); font-size: 36px; font-weight: 300; }
.val-card.ok .val-num { color: var(--ok); }
.val-card.warn .val-num { color: var(--warn); }
.val-card.err .val-num { color: var(--danger); }
.val-label { font-size: 11px; color: var(--muted); margin-top: 4px; }

.validation-list { display: flex; flex-direction: column; gap: 8px; }
.val-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 18px; font-size: 12px;
}
.val-item.ok   { border-color: rgba(18,128,92,.22); }
.val-item.warn { border-color: rgba(180,83,9,.45); }
.val-item.err  { border-color: rgba(198,40,40,.55); }
.val-icon { font-size: 14px; margin-top: 1px; }
.val-msg strong { display: block; margin-bottom: 2px; }
.val-msg span { color: var(--muted); font-size: 12px; }

/* ─── UPLOAD STATUS ──────────────────────────────────────── */
.upload-status { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.upload-step {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px;
  transition: border-color .4s;
}
.upload-step.active { border-color: var(--accent2); }
.upload-step.done { border-color: rgba(18,128,92,.3); }
.upload-step.error { border-color: rgba(198,40,40,.3); }
.us-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
  transition: all .4s;
}
.us-icon.pending { background: var(--border); color: var(--muted); }
.us-icon.loading { background: rgba(31,79,245,.1); color: var(--accent2); animation: spin 1s linear infinite; }
.us-icon.done { background: rgba(18,128,92,.1); color: var(--ok); }
.us-icon.error { background: rgba(198,40,40,.1); color: var(--danger); }
@keyframes spin { to { transform: rotate(360deg); } }
.us-text { flex: 1; }
.us-text strong { display: block; font-size: 13px; margin-bottom: 3px; }
.us-text span { font-size: 12px; color: var(--muted); }
.us-badge {
  font-size: 11px;
  color: var(--muted); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 8px;
}
.us-badge.active { color: var(--accent2); border-color: var(--accent2); }
.us-badge.done { color: var(--ok); border-color: var(--ok); }
.us-badge.error { color: var(--danger); border-color: var(--danger); }

.upload-result {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
}
.upload-result.success { border-color: rgba(18,128,92,.3); }
.upload-result.error { border-color: rgba(198,40,40,.3); }
.result-title { font-family: var(--font-sans); font-size: 28px; font-weight: 300; margin-bottom: 12px; }
.result-title.success em { color: var(--ok); }
.result-title.error em { color: var(--danger); }
.result-detail { font-size: 12px; color: var(--muted); line-height: 1.8; }
.result-links { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.result-link {
  font-size: 12px; color: var(--accent2);
  border: 1px solid rgba(31,79,245,.3); border-radius: 6px;
  padding: 6px 14px; text-decoration: none;
}

/* ─── TOAST ──────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 32px; right: 32px; z-index: 999;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 20px; font-size: 12px;
  box-shadow: var(--shadow-lift);
  animation: slideIn .3s ease;
}
.toast.hidden { display: none; }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── UTILS ──────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .header { padding: 14px 20px; }
  .main { padding: 28px 16px 60px; }
  .panel-title { font-size: 34px; }
  .type-cards { grid-template-columns: 1fr; }
  .config-row { grid-template-columns: 1fr; }
  .validation-summary { grid-template-columns: 1fr 1fr; }
  .steps-bar { gap: 0; }
  .step-label { display: none; }
}

/* ─── NAV TABS ───────────────────────────────────────────── */
.nav-tab {
  background: none; border: none; color: var(--muted);
  font-family: var(--font-sans); font-size: 12px; cursor: pointer;
  padding: 6px 14px; border-radius: 6px; transition: all .2s;
}
.nav-tab:hover { background: rgba(15,23,42,.05); }
.nav-tab.active { background: rgba(31,79,245,.12); color: var(--accent-fg); }

/* ─── REPLACE BANNER ─────────────────────────────────────── */
.replace-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(31,79,245,.08); border: 1px solid rgba(31,79,245,.25);
  border-radius: var(--radius); padding: 14px 20px; margin-bottom: 20px;
}
.replace-info { display: flex; align-items: center; gap: 12px; }
.replace-icon { font-size: 20px; color: var(--accent2); }
.replace-info strong { display: block; font-size: 13px; color: var(--accent2); }
.replace-info span { font-size: 12px; color: var(--muted); }
.replace-cancel {
  background: none; border: 1px solid rgba(31,79,245,.3);
  color: var(--muted); font-family: var(--font-sans); font-size: 12px;
  border-radius: 6px; padding: 6px 12px; cursor: pointer; transition: all .2s;
}
.replace-cancel:hover { border-color: var(--danger); color: var(--danger); }

/* ─── HISTORIAL FILTERS ──────────────────────────────────── */
.hist-filters {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.hist-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 14px; flex: 1; min-width: 200px;
}
.hist-search svg { color: var(--muted); flex-shrink: 0; }
.hist-search input {
  background: none; border: none; color: var(--text);
  font-family: var(--font-sans); font-size: 12px; outline: none; width: 100%;
}
.hist-search input::placeholder { color: var(--muted); }
.hist-filter-btns { display: flex; gap: 6px; }
.filter-btn {
  background: none; border: 1px solid var(--border);
  color: var(--muted); font-family: var(--font-sans); font-size: 12px;
  border-radius: 6px; padding: 6px 12px; cursor: pointer; transition: all .2s;
}
.filter-btn:hover { border-color: var(--border2); }
.filter-btn.active { border-color: var(--accent); color: var(--accent-fg); background: rgba(31,79,245,.06); }
.filter-btn[data-filter="eliminado"].active { border-color: var(--danger); color: var(--danger); background: rgba(198,40,40,.06); }

/* ─── HIST STATS ─────────────────────────────────────────── */
.hist-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 10px;
  margin-bottom: 24px;
}
.hstat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; text-align: center;
}
.hstat-num { font-family: var(--font-sans); font-size: 30px; font-weight: 300; color: var(--accent-fg); }
.hstat-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ─── HIST LIST ──────────────────────────────────────────── */
.hist-list { display: flex; flex-direction: column; gap: 10px; }
.hcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color .2s;
}
.hcard:hover { border-color: var(--border2); }
.hcard.eliminado { opacity: .5; }
.hcard-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer;
}
.hcard-tipo {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 14px;
}
.hcard-tipo.individual { background: rgba(31,79,245,.1); color: var(--accent2); }
.hcard-tipo.masivo { background: rgba(31,79,245,.1); color: var(--accent-fg); }
.hcard-tipo.eliminado { background: rgba(198,40,40,.1); color: var(--danger); }
.hcard-main { flex: 1; }
.hcard-id { font-size: 13px; font-weight: 500; margin-bottom: 3px; }
.hcard-meta { font-size: 12px; color: var(--muted); }
.hcard-badges { display: flex; gap: 6px; align-items: center; }
.hbadge {
  font-size: 11px; padding: 3px 8px; border-radius: 4px; border: 1px solid;
}
.hbadge.individual { background: rgba(31,79,245,.08); border-color: rgba(31,79,245,.3); color: var(--accent2); }
.hbadge.masivo { background: rgba(31,79,245,.08); border-color: rgba(31,79,245,.3); color: var(--accent-fg); }
.hbadge.eliminado { background: rgba(198,40,40,.08); border-color: rgba(198,40,40,.3); color: var(--danger); }
.hcard-toggle { color: var(--muted); font-size: 14px; transition: transform .2s; }
.hcard.open .hcard-toggle { transform: rotate(180deg); }

.hcard-body { border-top: 1px solid var(--border); padding: 16px 20px; display: none; }
.hcard.open .hcard-body { display: block; }
.hcard-detail {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px;
}
.hdetail-item { }
.hdetail-label { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.hdetail-val { font-size: 12px; color: var(--text); }

.hcard-log { margin-bottom: 16px; }
.hlog-title { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.hlog-list { display: flex; flex-direction: column; gap: 4px; }
.hlog-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; padding: 6px 10px;
  background: rgba(15,23,42,.03); border-radius: 6px;
}
.hlog-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hlog-dot.carga { background: var(--accent2); }
.hlog-dot.reemplazo { background: var(--accent); }
.hlog-dot.eliminacion { background: var(--danger); }
.hlog-ts { color: var(--muted); margin-left: auto; }

.hcard-actions { display: flex; gap: 8px; }
.btn-replace {
  display: flex; align-items: center; gap: 6px;
  background: rgba(31,79,245,.08); border: 1px solid rgba(31,79,245,.25);
  color: var(--accent-fg); font-family: var(--font-sans); font-size: 12px;
  border-radius: 8px; padding: 8px 16px; cursor: pointer; transition: all .2s;
}
.btn-replace:hover { background: rgba(31,79,245,.15); }
.btn-delete {
  display: flex; align-items: center; gap: 6px;
  background: rgba(198,40,40,.06); border: 1px solid rgba(198,40,40,.2);
  color: var(--danger); font-family: var(--font-sans); font-size: 12px;
  border-radius: 8px; padding: 8px 16px; cursor: pointer; transition: all .2s;
}
.btn-delete:hover { background: rgba(198,40,40,.12); }
.btn-restore {
  display: flex; align-items: center; gap: 6px;
  background: rgba(31,79,245,.08); border: 1px solid rgba(31,79,245,.25);
  color: var(--accent2); font-family: var(--font-sans); font-size: 12px;
  border-radius: 8px; padding: 8px 16px; cursor: pointer; transition: all .2s;
}
.btn-restore:hover { background: rgba(31,79,245,.15); }

.hist-empty {
  text-align: center; padding: 60px 32px;
  color: var(--muted); font-size: 13px;
}
.hist-empty strong { display: block; font-size: 16px; color: var(--text); margin-bottom: 8px; }

/* ─── MODAL ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16,24,40,.45); display: grid; place-items: center;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 32px; max-width: 420px; width: 90%;
  text-align: center;
}
.modal-icon { font-size: 32px; margin-bottom: 16px; }
.modal-title { font-family: var(--font-sans); font-size: 22px; font-weight: 300; margin-bottom: 10px; }
.modal-body { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 24px; }
.modal-footer { display: flex; gap: 10px; justify-content: center; }
.btn-danger {
  background: var(--danger); color: #fff; border: none;
  border-radius: 8px; padding: 10px 24px; font-family: var(--font-sans);
  font-size: 13px; cursor: pointer; transition: opacity .2s;
}
.btn-danger:hover { opacity: .85; }

@media(max-width:640px){
  .hist-stats { grid-template-columns: 1fr 1fr; }
  .hcard-detail { grid-template-columns: 1fr 1fr; }
  .hist-filters { flex-direction: column; align-items: stretch; }
}

/* ─── FORMULA EDIT CARDS ─────────────────────────────────── */
.fedit-section { margin-top: 28px; }
.fedit-section-title {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.fedit-section-title span:first-child { font-size: 13px; font-weight: 500; }
.fedit-hint { font-size: 12px; color: var(--muted); }

.fedit-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 10px;
  overflow: hidden; transition: border-color .2s;
}
.fedit-card:hover { border-color: var(--border2); }
.fedit-card.open { border-color: var(--accent2); }
.fedit-card.confirmed { border-color: rgba(18,128,92,.35); background: rgba(18,128,92,.02); }

.fedit-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer;
}
.fedit-tipo {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: rgba(31,79,245,.1); color: var(--accent2);
  display: grid; place-items: center; font-size: 14px;
}
.fedit-card.confirmed .fedit-tipo { background: rgba(18,128,92,.1); color: var(--ok); }
.fedit-main { flex: 1; }
.fedit-dummy { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.fedit-meta  { font-size: 12px; color: var(--muted); }
.fedit-status { margin-left: auto; }
.fedit-badge {
  font-size: 11px; padding: 3px 8px; border-radius: 4px;
  border: 1px solid;
}
.fedit-badge.pending { color: var(--muted); border-color: var(--border2); }
.fedit-badge.ready   { color: var(--ok); border-color: rgba(18,128,92,.4); background: rgba(18,128,92,.08); }
.fedit-toggle { color: var(--muted); font-size: 12px; transition: transform .2s; flex-shrink: 0; }
.fedit-card.open .fedit-toggle { transform: rotate(180deg); }

.fedit-body {
  display: none; border-top: 1px solid var(--border);
  padding: 18px 20px;
}
.fedit-card.open .fedit-body { display: block; animation: fadeUp .25s ease; }

.fedit-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; margin-bottom: 18px;
}
.fedit-field.wide { grid-column: span 2; }

.fedit-label {
  display: block; font-size: 11px;
 color: var(--muted); margin-bottom: 5px;
}
.fedit-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-family: var(--font-sans);
  font-size: 12px; padding: 8px 12px; outline: none;
  transition: border-color .2s;
}
.fedit-input:focus { border-color: var(--accent2); }
.fedit-input::placeholder { color: var(--muted); }

.fedit-preview {
  background: rgba(15,23,42,.02); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 14px;
}
.fedit-preview-title {
  font-size: 11px; color: var(--muted);
 margin-bottom: 10px;
}
.fedit-preview-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px;
}
.fedit-preview-row:last-child { border-bottom: none; }
.fedit-preview-row span { color: var(--muted); }
.fedit-preview-row strong { color: var(--accent2); font-weight: 500; }

.fedit-foot { display: flex; justify-content: flex-end; }
.fedit-apply-btn {
  background: rgba(18,128,92,.1); border: 1px solid rgba(18,128,92,.3);
  color: var(--ok); font-family: var(--font-sans); font-size: 12px;
  border-radius: 8px; padding: 8px 20px; cursor: pointer;
  transition: all .2s;
}
.fedit-apply-btn:hover { background: rgba(18,128,92,.18); }

/* pulse en btn subir cuando todo está listo */
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(31,79,245,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(31,79,245,.0); }
}
.btn-primary.pulse { animation: pulse 1.5s ease infinite; }

@media(max-width:640px){
  .fedit-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── ORIGEN ÚNICO + MES AUTO ────────────────────────────── */
.fedit-origen-wrap {
  background: rgba(31,79,245,.06);
  border: 1px solid rgba(31,79,245,.25);
  border-radius: var(--radius); padding: 16px 20px;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 20px;
}
.fedit-origen-label { flex-shrink: 0; }
.fedit-origen-label .fedit-label { margin-bottom: 3px; color: var(--accent2); }
.fedit-hint-inline { font-size: 11px; color: var(--muted); display: block; }
.fedit-origen-input { max-width: 220px; border-color: rgba(31,79,245,.3) !important; }
.fedit-origen-input:focus { border-color: var(--accent2) !important; }

.fedit-mes-auto {
  display: flex; align-items: center; gap: 10px;
  background: rgba(31,79,245,.05); border: 1px solid rgba(31,79,245,.15);
  border-radius: 6px; padding: 8px 14px; margin-bottom: 14px; font-size: 12px;
}
.fedit-mes-label { color: var(--muted); }
.fedit-mes-val {
  color: var(--accent-fg); font-weight: 500; font-size: 13px;
  text-transform: capitalize;
}


/* ─── NAV HOME BUTTON ────────────────────────────────────── */
.nav-home {
  background: none; border: 1px solid var(--border);
  color: var(--muted); width: 32px; height: 32px;
  border-radius: 8px; cursor: pointer; font-size: 15px;
  display: grid; place-items: center; margin-left: 4px;
  transition: all .2s;
}
.nav-home:hover { border-color: var(--accent2); color: var(--accent2); }

/* ─── HOME VIEW ──────────────────────────────────────────── */
.home-hero { text-align: left; padding: var(--space-7) 0 var(--space-6); }
.home-title {
  font-size: var(--text-display); font-weight: var(--weight-semibold);
  line-height: 1.1; letter-spacing: -.03em; color: var(--text); margin-bottom: var(--space-2);
}
.home-sub { font-size: var(--text-md); color: var(--muted); line-height: 1.5; max-width: 52ch; }

.home-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.home-card {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5);
  cursor: pointer; text-align: left; width: 100%; color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.home-card:hover { border-color: var(--primary-border); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.home-card-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md); flex: none;
  display: grid; place-items: center; background: var(--primary-soft); color: var(--primary);
}
.home-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-card-body strong { font-size: var(--text-md); font-weight: var(--weight-semibold); color: inherit; }
.home-card-body span { font-size: var(--text-sm); color: var(--muted); line-height: 1.45; }
.home-card-arrow { display: inline-grid; color: var(--muted); transition: color .15s, transform .15s; }
.home-card:hover .home-card-arrow { color: var(--primary); transform: translateX(2px); }

/* acción principal: ancho completo y color de marca */
.home-card.home-card--primary { grid-column: 1 / -1; background: var(--primary); border-color: var(--primary); color: var(--on-primary); padding-top: var(--space-5); padding-bottom: var(--space-5); }
.home-card.home-card--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.home-card.home-card--primary .home-card-icon { background: rgba(255,255,255,.16); color: var(--on-primary); }
.home-card.home-card--primary .home-card-body span, .home-card.home-card--primary .home-card-arrow { color: rgba(255,255,255,.82); }
.home-card.home-card--primary:hover .home-card-arrow { color: var(--on-primary); }
@media (max-width: 700px) { .home-cards { grid-template-columns: 1fr; } .home-title { font-size: 32px; } }

/* ─── BARRA DE ACCIÓN (descarga) ─────────────────────────── */
.viz-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding: 10px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.viz-result-info { font-size: 12px; color: var(--muted); }
.btn-download {
  display: flex; align-items: center; gap: 7px;
  background: rgba(18,128,92,.08); border: 1px solid rgba(18,128,92,.3);
  color: var(--ok); font-family: var(--font-sans); font-size: 12px;
  border-radius: 8px; padding: 7px 16px; cursor: pointer;
  transition: all .2s;
}
.btn-download:hover { background: rgba(18,128,92,.16); }

/* Filtros con 6 columnas para Nutricion */
.prox-filters.six-col {
  grid-template-columns: 1fr 1.2fr 1fr 1fr 1fr auto;
}

@media(max-width:640px) {
  .home-cards { grid-template-columns: 1fr; }
  .home-title { font-size: 48px; }
}

/* ─── PROXIMALES VIEW ────────────────────────────────────── */
.prox-filters {
  display: grid; grid-template-columns: 1fr 1.5fr 1fr 1fr auto;
  gap: 12px; align-items: end;
  margin-bottom: 24px;
}
.prox-filter-group { display: flex; flex-direction: column; }

.prox-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 24px;
}
.prox-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px;
}
.prox-stat-num {
  font-family: var(--font-sans); font-size: 28px; font-weight: 300;
  color: var(--accent-fg); line-height: 1;
}
.prox-stat-lbl {
  font-size: 11px; color: var(--muted);
 margin-top: 4px;
}

.prox-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 72px 32px; gap: 10px;
  border: 1px dashed var(--border2); border-radius: var(--radius);
  color: var(--muted); font-size: 13px; text-align: center;
}
.prox-empty-icon { font-size: 36px; margin-bottom: 4px; opacity: .4; }
.prox-empty strong { font-size: 15px; color: var(--text); }

.prox-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 56px; color: var(--muted); font-size: 13px;
}
.prox-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border2);
  border-top-color: var(--accent2);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* tabla de resultados proximales */
.prox-result-meta {
  font-size: 12px; color: var(--muted); margin-bottom: 10px;
}
.prox-result-wrap {
  overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  max-height: 620px; overflow-y: auto;
}

@media(max-width:640px) {
  .prox-filters { grid-template-columns: 1fr 1fr; }
  .prox-stats   { grid-template-columns: 1fr 1fr; }
}

.prox-table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
  min-width: max-content;
}
.prox-table th, .prox-table td {
  padding: 0;
  border: none;
}

/* Encabezado de columnas (números + estab) */
.prox-col-header th {
  padding: 6px 10px;
  background: var(--surface);
  border-bottom: 2px solid var(--border2);
  text-align: center;
  white-space: nowrap;
}
.prox-fixed-col {
  min-width: 200px;
  text-align: left !important;
}
.prox-col-num {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
.prox-col-tipo {
  font-size: 11px;
  color: var(--accent2);
  font-weight: 500;
}

/* Filas de encabezado de fórmula (DUMMY, SKU, etc.) */
.prox-header-row td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.prox-row-label {
  font-size: 11px;


  color: var(--accent2);
  font-weight: 500;
  background: #f1f7f7;
  min-width: 200px;
  position: sticky;
  left: 0;
  z-index: 1;
}
.prox-header-val {
  text-align: center;
  font-size: 12px;
  color: var(--text);
  background: rgba(31,79,245,.03);
  min-width: 90px;
}

/* Separador de sección PROXIMALES */
.prox-section-sep td {
  padding: 10px 10px 6px;
  border-top: 2px solid var(--border2);
  border-bottom: 1px solid var(--border2);
  background: rgba(31,79,245,.04);
}
.prox-section-sep span {
  font-size: 11px;
  font-weight: 500;


  color: var(--accent-fg);
}
.prox-unit-hint {
  margin-left: 12px;
  font-size: 11px;
  color: var(--muted) !important;

}

/* Filas de datos de nutrientes */
.prox-data-row:hover td { background: #f7f8fa; }
.prox-data-row td {
  border-bottom: 1px solid rgba(15,23,42,.03);
  padding: 5px 10px;
}
.prox-nutrient {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 200px;
  font-size: 12px;
  color: var(--text);
  position: sticky;
  left: 0;
  background: var(--bg);
  z-index: 1;
}
.prox-data-row:hover .prox-nutrient { background: #eef0f4; }
.prox-cod {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-sans);
  flex-shrink: 0;
  min-width: 28px;
}
.prox-unit {
  font-size: 9px;
  color: var(--muted);
  background: rgba(15,23,42,.05);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: auto;
  flex-shrink: 0;
}
.prox-agrup {
  font-size: 9px;
  color: var(--accent2);
  background: rgba(31,79,245,.1);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}

/* Valores numéricos */
.prox-table .num-cell {
  text-align: right;
  font-size: 12px;
  min-width: 72px;
  padding: 5px 12px;
  font-variant-numeric: tabular-nums;
}
.prox-zero { color: var(--muted) !important; }
.prox-high { color: var(--accent-fg) !important; }


/* ─── EDITOR DE DIETA ────────────────────────────────────── */
.editor-search-bar {
  display: flex; gap: 10px; align-items: flex-end;
  margin-bottom: 24px; flex-wrap: wrap;
}
.editor-search-bar .config-group { flex: 1; min-width: 140px; }
.editor-result-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.editor-formula-title {
  font-family: var(--font-sans); font-size: 28px; font-weight: 300;
}
.editor-formula-title em { color: var(--primary); font-style: normal; }
.editor-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.editor-tab {
  font-size: 12px; padding: 6px 16px; border-radius: 6px;
  border: 1px solid var(--border); background: none;
  cursor: pointer; font-family: var(--font-sans); color: var(--muted);
  transition: all .15s;
}
.editor-tab.active { border-color: var(--primary); color: var(--primary); background: rgba(31,79,245,.08); }
.editor-section { display: none; }
.editor-section.active { display: block; }

/* Cabecera editable */
.editor-header-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.editor-header-grid .wide { grid-column: span 2; }

/* Tabla editable inline */
.editor-table-wrap { overflow-x: auto; border-radius: var(--radius); margin-bottom: 16px; }
.editor-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.editor-table thead th {
  background: var(--surface); padding: 9px 12px;
  text-align: left; font-size: 11px; color: var(--muted);

  border-bottom: 1px solid var(--border); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.editor-table tbody td {
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.editor-table tbody tr:hover td { background: rgba(31,79,245,.03); }
.editor-table tbody tr.edited td { background: rgba(31,79,245,.06); }
.editor-val-input {
  background: transparent; border: none;
  color: var(--primary); font-family: var(--font-sans); font-size: 12px;
  width: 90px; text-align: right; padding: 2px 4px;
  border-radius: 4px; outline: none;
  transition: background .15s;
}
.editor-val-input:focus {
  background: rgba(31,79,245,.12);
  border: 1px solid rgba(31,79,245,.4);
}
.editor-val-input.changed { color: var(--warn); font-weight: 500; }
.editor-badge-edited {
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  background: rgba(180,83,9,.1); color: var(--warn);
  border: 1px solid rgba(180,83,9,.3); margin-left: 6px;
}
.editor-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; gap: 10px; flex-wrap: wrap;
}
.editor-changes-count { font-size: 12px; color: var(--muted); }
.editor-changes-count strong { color: var(--warn); }
.btn-save-edits {
  display: flex; align-items: center; gap: 8px;
  background: rgba(31,79,245,.12); border: 1px solid rgba(31,79,245,.35);
  color: var(--primary); font-family: var(--font-sans); font-size: 13px;
  border-radius: 8px; padding: 10px 24px; cursor: pointer;
  transition: all .2s;
}
.btn-save-edits:hover { background: rgba(31,79,245,.2); }
.btn-save-edits:disabled { opacity: .3; cursor: not-allowed; }
.editor-empty {
  text-align: center; padding: 60px 20px;
  color: var(--muted); font-size: 13px;
}
.editor-empty strong { display: block; font-size: 16px; color: var(--text); margin-bottom: 8px; }

/* Log de cambios */
.editor-log { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.editor-log-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; padding: 6px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; border-color: rgba(180,83,9,.4);
}
.editor-log-field { color: var(--warn); font-weight: 500; min-width: 120px; }
.editor-log-old { color: var(--muted); text-decoration: line-through; }
.editor-log-new { color: var(--accent2); }
.editor-log-arrow { color: var(--muted); }

@media(max-width:640px) {
  .editor-header-grid { grid-template-columns: 1fr 1fr; }
  .editor-header-grid .wide { grid-column: 1 / -1; }
}

/* ─── LOGIN SCREEN ───────────────────────────────────────── */
.login-screen {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 48px 40px; width: 100%; max-width: 400px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(16,24,40,.22);
}
.login-logo { display: flex; justify-content: center; margin-bottom: 20px; }
.login-title {
  font-family: var(--font-sans); font-size: 32px; font-weight: 300;
  margin-bottom: 10px; color: var(--text);
}
.login-sub { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 32px; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 12px 20px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-family: var(--font-sans);
  font-size: 13px; cursor: pointer; transition: all .2s;
  margin-bottom: 16px;
}
.btn-google:hover { border-color: var(--accent2); background: rgba(31,79,245,.05); }
.login-hint { font-size: 12px; color: var(--muted); }
.login-hint strong { color: var(--accent2); }
.login-error {
  margin-top: 16px; padding: 10px 14px;
  background: rgba(198,40,40,.08); border: 1px solid rgba(198,40,40,.3);
  border-radius: 8px; font-size: 12px; color: var(--danger);
}

/* ─── USER PILL ──────────────────────────────────────────── */
.user-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 12px 5px 5px;
}
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; background: var(--border);
}
.user-info { display: flex; flex-direction: column; }
.user-name  { font-size: 12px; font-weight: 500; line-height: 1.2; }
.user-email { font-size: 11px; color: var(--muted); }
.user-logout {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; padding: 2px 4px; margin-left: 4px;
  border-radius: 4px; transition: color .2s;
}
.user-logout:hover { color: var(--danger); }

/* ─── TRAZABILIDAD FAB ───────────────────────────────────── */
.traz-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 200;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 10px 18px;
  color: var(--text); font-family: var(--font-sans); font-size: 12px;
  cursor: pointer; box-shadow: var(--shadow-lift);
  transition: all .2s;
}
.traz-fab:hover { border-color: var(--accent2); color: var(--accent2); }
.traz-fab-count {
  background: var(--accent); color: var(--on-accent);
  border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 500;
}

/* ─── TRAZABILIDAD PANEL ─────────────────────────────────── */
.traz-panel {
  position: fixed; bottom: 80px; right: 28px; z-index: 201;
  width: 480px; max-height: 520px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 56px -8px rgba(16,24,40,.28);
  display: flex; flex-direction: column;
}
.traz-panel.hidden { display: none; }
.traz-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg); flex-shrink: 0;
}
.traz-title { font-size: 13px; font-weight: 500; }
.traz-filter {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-family: var(--font-sans);
  font-size: 12px; padding: 4px 8px; outline: none;
}
.traz-close {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 13px; padding: 2px 6px;
}
.traz-close:hover { color: var(--danger); }
.traz-list { overflow-y: auto; flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.traz-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; font-size: 12px;
}
.traz-item.carga      { border-color: rgba(31,79,245,.4); }
.traz-item.edicion    { border-color: rgba(31,79,245,.45); }
.traz-item.eliminacion{ border-color: rgba(198,40,40,.5); }
.traz-item.reemplazo  { border-color: rgba(180,83,9,.45); }
.traz-item-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.traz-item-body { flex: 1; }
.traz-item-action { font-weight: 500; margin-bottom: 3px; text-transform: capitalize; }
.traz-item.carga       .traz-item-action { color: var(--accent2); }
.traz-item.edicion     .traz-item-action { color: var(--primary); }
.traz-item.eliminacion .traz-item-action { color: var(--danger); }
.traz-item.reemplazo   .traz-item-action { color: var(--warn); }
.traz-item-detail { color: var(--muted); line-height: 1.5; }
.traz-item-meta {
  font-size: 11px; color: var(--muted); text-align: right;
  flex-shrink: 0; white-space: nowrap;
}
.traz-item-user { font-weight: 500; color: var(--text); display: block; }
.traz-empty { text-align: center; padding: 40px; color: var(--muted); font-size: 12px; }

@media(max-width:640px) {
  .traz-panel { width: calc(100vw - 32px); right: 16px; }
  .user-email { display: none; }
}

.aud-filtros { display: flex; gap: 8px; margin: 16px 0 8px; flex-wrap: wrap; }
.aud-chip {
  padding: 7px 16px; border: 1px solid var(--border2); background: transparent; color: var(--muted);
  border-radius: 20px; font-family: var(--font-sans); font-size: 12px; cursor: pointer; transition: all .2s;
}
.aud-chip:hover { border-color: var(--accent2); color: var(--text); }
.aud-chip.active { background: rgba(31,79,245,.12); color: var(--accent-fg); border-color: var(--accent); }
.aud-nota { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.aud-evento { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.aud-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.aud-head:hover { background: rgba(15,23,42,.03); }
.aud-badge { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 6px; border: 1px solid; }
.aud-badge.CARGA       { background: rgba(18,128,92,.1);  color: var(--ok);     border-color: rgba(18,128,92,.3); }
.aud-badge.EDICION     { background: rgba(180,83,9,.1);  color: var(--warn);   border-color: rgba(180,83,9,.3); }
.aud-badge.ELIMINACION { background: rgba(198,40,40,.1);   color: var(--danger); border-color: rgba(198,40,40,.3); }
.aud-meta { flex: 1; min-width: 0; }
.aud-user { font-weight: 500; font-size: 14px; color: var(--text); }
.aud-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.aud-fecha { font-size: 12px; color: var(--muted); white-space: nowrap; }
.aud-detalle { display: none; border-top: 1px solid var(--border); background: var(--bg); padding: 4px 16px 12px; }
.aud-evento.open .aud-detalle { display: block; }
.aud-fila { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 13px; align-items: center; }
.aud-fila:last-child { border-bottom: none; }
.aud-campo { font-weight: 500; color: var(--text); }
.aud-old { color: var(--danger); text-decoration: line-through; font-size: 12px; }
.aud-new { color: var(--ok); font-size: 12px; }
.aud-vacio { text-align: center; padding: 40px; color: var(--muted); font-size: 14px; }
/* ═══════════════════════════════════════════════════════════════════════════
   CAPA DE DISEÑO · componentes compartidos (usan solo tokens.css)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Base ─────────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(31,79,245,.2); color: var(--text); }
::placeholder { color: var(--placeholder); opacity: 1; }
html { scrollbar-color: var(--border-strong) var(--bg); scrollbar-width: thin; }
table, .num-cell, .val-num { font-variant-numeric: tabular-nums; }
/* mono solo para códigos, SKU y números de tablas */
.num-cell, .code-cell, .formula-tag, .prox-cod, .prox-header-val, .prox-col-num, .aud-old, .aud-new { font-family: var(--font-mono); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ─── Botones: planos; la sombra aparece solo al pasar el mouse ─────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--primary); color: var(--on-primary);
  border: 1px solid var(--primary); border-radius: var(--radius-md);
  padding: 10px 18px; font-size: var(--text-base); font-weight: var(--weight-medium);
  cursor: pointer; box-shadow: none; opacity: 1;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: var(--shadow-md); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn-primary:disabled { background: var(--border); border-color: var(--border); color: #8a9792; cursor: not-allowed; }
.btn-secondary, .btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 10px 18px; font-size: var(--text-base); font-weight: var(--weight-medium);
  cursor: pointer; box-shadow: none;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn-secondary:hover:not(:disabled), .btn-google:hover:not(:disabled) { background: var(--surface-2); border-color: #b9c0cc; box-shadow: var(--shadow-sm); }
.btn-secondary:active:not(:disabled), .btn-google:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }

/* ─── Píldoras (pestañas y filtros) ──────────────────────────────────────── */
.tab, .filter-btn, .aud-chip {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2);
  border-radius: var(--radius-md); padding: 7px 14px; font-size: var(--text-sm); font-weight: var(--weight-medium);
  box-shadow: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.tab:hover, .filter-btn:hover, .aud-chip:hover { border-color: var(--primary); color: var(--primary); transform: none; box-shadow: none; }
.tab.active, .filter-btn.active, .aud-chip.active { background: var(--primary-soft); border-color: var(--primary-border); color: var(--primary); box-shadow: none; }

/* ─── Tarjetas y campos ──────────────────────────────────────────────────── */
.home-card, .type-card, .val-card, .hcard, .fedit-card, .aud-evento, .meta-chip, .drop-zone, .result-card, .table-wrap {
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.home-card, .type-card { border-radius: var(--radius-xl); transition: border-color .15s, box-shadow .15s, transform .15s; }
.home-card:hover, .type-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.type-card.selected { background: var(--primary-soft); border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.config-input, .fedit-input, .hist-search input, .filter-field select, .filter-field input {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  color: var(--text); font-size: var(--text-base); box-shadow: none;
}
.config-input:focus, .fedit-input:focus, .hist-search input:focus, .filter-field select:focus, .filter-field input:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--focus-ring);
}
.toast, .traz-fab { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.traz-fab:hover { transform: translateY(-1px); }

/* ─── ENCABEZADO COMPARTIDO ─────────────────────────────────────────────────
   Una sola fila: logo · navegación · usuario. Por debajo de 1100 px la navegación
   pasa a su propia fila. Los textos del menú nunca se parten en dos líneas. */
.header {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo nav user";
  align-items: center; gap: var(--space-5);
  padding: var(--space-3) var(--space-6);
  background: rgba(244,245,247,.92); border-bottom: 1px solid var(--border);
}
.logo { grid-area: logo; }
.header-nav { grid-area: nav; display: flex; align-items: center; gap: var(--space-1); min-width: 0; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.header-nav::-webkit-scrollbar { display: none; }
.user-pill { grid-area: user; }
.nav-tab {
  flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 7px 12px; border-radius: var(--radius-md);
  font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--muted);
  background: none; border: none; transition: background .15s, color .15s;
}
.nav-tab:hover { background: rgba(16,24,40,.05); color: var(--text); }
.nav-tab.active { background: var(--primary-soft); color: var(--primary); }
.nav-home {
  flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  color: var(--text-2); cursor: pointer; margin-left: var(--space-1);
}
.nav-home:hover { border-color: var(--primary); color: var(--primary); }
.logo-img { display: block; border-radius: 10px; flex: none; box-shadow: none; }
.login-logo .logo-img { border-radius: 14px; }
@media (max-width: 1180px) {            /* compacto: mismo orden, menos ancho */
  .header { gap: var(--space-4); padding-left: var(--space-5); padding-right: var(--space-5); }
  .nav-tab { padding: 7px 10px; }
  .user-info { display: none; }          /* la identidad queda en el tooltip del usuario */
}
@media (max-width: 980px) {             /* la navegación pasa a su propia fila */
  .header { grid-template-columns: 1fr auto; grid-template-areas: "logo user" "nav nav"; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); }
  .header-nav { justify-content: flex-start; }
}

/* ─── BARRA DE FILTROS COMPARTIDA ───────────────────────────────────────────
   Todos los filtros y el botón de acción en una fila en pantallas grandes;
   en pequeñas se reparten en filas con la misma rejilla. Nada se corta. */
.filter-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3) var(--space-4); align-items: end; margin-bottom: var(--space-5);
}
.filter-bar > * { min-width: 0; }
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field label, .filter-label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-2); text-transform: none; letter-spacing: 0; }
.filter-field select, .filter-field input { width: 100%; padding: 9px 12px; }
.filter-bar .btn-primary, .filter-bar .btn-secondary { width: 100%; padding-top: 9px; padding-bottom: 9px; }

/* ─── ALERTA COMPARTIDA ──────────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 10px 12px; border: 1px solid; border-radius: var(--radius-md);
  font-size: var(--text-sm); line-height: 1.45; margin-bottom: var(--space-4);
}
.alert__icon { flex: none; margin-top: 1px; }
.alert__text { flex: 1; min-width: 0; }
.alert__close {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -2px -4px 0 0;
  background: none; border: none; border-radius: var(--radius-sm); color: inherit; opacity: .65; cursor: pointer;
}
.alert__close:hover { opacity: 1; background: rgba(16,24,40,.06); }
.alert--warning { background: var(--warning-soft); border-color: var(--warning-border); color: #7a3a07; }
.alert--warning .alert__icon { color: var(--warning); }
.alert--error   { background: var(--error-soft);   border-color: var(--error-border);   color: #8f1d1d; }
.alert--error .alert__icon { color: var(--error); }
.alert--success { background: var(--success-soft); border-color: var(--success-border); color: #1f5a23; }
.alert--success .alert__icon { color: var(--success); }

/* ─── TARJETA DE ESTADÍSTICA (compacta y sobria) ─────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: none; text-align: left;
}
.stat__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: var(--space-2); border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary); }
.stat__value { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.stat__label { font-size: var(--text-sm); color: var(--muted); }
.stat--success .stat__icon { background: var(--success-soft); color: var(--success); }
.stat--warning .stat__icon { background: var(--warning-soft); color: var(--warning); }
.stat--error   .stat__icon { background: var(--error-soft);   color: var(--error); }
.stat--error   .stat__value { color: var(--error); }

/* ─── TABLAS ─────────────────────────────────────────────────────────────── */
.table-wrap { max-height: 64vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
thead th { z-index: 2; }
tbody tr:nth-child(even) td { background: var(--surface-2); }       /* filas alternadas sutiles, con fondo sólido */
tbody tr:hover td { background: var(--primary-soft); }
.fx {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  box-shadow: 8px 0 10px -8px rgba(16,24,40,.22);
}
tbody tr:nth-child(even) td.fx { background: var(--surface-2); }
tbody tr:hover td.fx { background: var(--primary-soft); }
thead th.fx { z-index: 3; }

/* matrices (Proximales / Perfil nutricional / Receta) */
.prox-col-header th.prox-fixed-col { position: sticky; left: 0; top: 0; z-index: 4; background: var(--surface); box-shadow: 8px 0 10px -8px rgba(16,24,40,.22); }
.prox-sep-inner { position: sticky; left: 10px; display: inline-flex; align-items: baseline; gap: 12px; width: max-content; }
.prox-result-wrap::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
.prox-result-wrap::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
.prox-result-wrap::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track { background: transparent; }

/* ─── Aviso (toast) ──────────────────────────────────────────────────────── */
.toast {
  right: auto; left: 50%; bottom: var(--space-5); transform: translateX(-50%);
  max-width: min(92vw, 520px); text-align: center; pointer-events: none;
  animation: toastIn .25s cubic-bezier(.16,1,.3,1);
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ─── Validación: comprobaciones agrupadas ───────────────────────────────── */
.val-ok-group { margin-top: var(--space-3); }
.val-ok-group > summary { cursor: pointer; list-style: none; font-size: var(--text-sm); color: var(--muted); padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.val-ok-group > summary::-webkit-details-marker { display: none; }
.val-ok-group > summary::before { content: '▸  '; color: var(--success); }
.val-ok-group[open] > summary::before { content: '▾  '; }
.val-ok-group[open] > summary { margin-bottom: var(--space-2); }
.val-all-ok { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: var(--space-2); background: var(--success-soft); border: 1px solid var(--success-border); border-radius: var(--radius-md); font-size: var(--text-sm); color: #1f5a23; }

/* ─── Responsive base ────────────────────────────────────────────────────── */
@media (max-width: 960px) { .traz-panel { right: 12px; left: 12px; width: auto; } }
@media (max-width: 640px) {
  .panel-footer { flex-wrap: wrap; gap: 10px; }
  .panel-footer .btn-primary, .panel-footer .btn-secondary { flex: 1 1 140px; }
  .toast { bottom: 84px; }
}

/* ─── Piezas existentes que se conservan (se migran a componentes página por página) ─── */
.tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; white-space: nowrap; }
@media (max-width: 640px) {
  .fedit-origen-wrap { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
  .fedit-origen-label { flex-shrink: 1; }
  .fedit-origen-input { max-width: none; width: 100%; }
}
.hstat, .val-card { border-radius: var(--radius-lg); background: var(--surface); box-shadow: none; }
.hstat-num { font-weight: var(--weight-semibold); }

/* ═══ ETIQUETAS: texto normal, pequeño y gris ═══════════════════════════════ */
.config-label, .fedit-label, .filter-label, .hdetail-label, .hlog-title, .hstat-lbl, .val-label,
.prox-stat-lbl, .fedit-preview-title, .us-badge, .info-readonly dt {
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--muted);
}
thead th, .editor-table thead th, .prox-row-label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--muted); }
.prox-section-sep span { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-2); }

/* ═══ DESTINO DE LA CARGA: información de solo lectura ══════════════════════ */
.info-readonly {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.info-readonly__item { min-width: 0; }
.info-readonly dt { margin-bottom: 2px; }
.info-readonly dd { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.info-readonly dd .icon { color: var(--muted); }
.info-readonly dd span { overflow-wrap: anywhere; }

/* ═══ ICONOS en los lugares donde antes había símbolos de texto ═════════════ */
.toast { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.toast__icon { display: inline-grid; }
.toast__icon--ok { color: var(--success); }
.toast__icon--warn { color: var(--warning); }
.val-icon { display: inline-grid; font-size: 16px; margin-top: 1px; }
.val-item.ok .val-icon { color: var(--success); }
.val-item.warn .val-icon { color: var(--warning); }
.val-item.err .val-icon { color: var(--error); }
.arrow, .fedit-toggle, .hcard-toggle, .replace-icon, .traz-item-icon, .editor-log-arrow { display: inline-grid; place-items: center; }
.type-icon, .fedit-tipo, .hcard-tipo, .modal-icon, .prox-empty-icon { display: grid; place-items: center; }
.type-icon { color: var(--text-2); }
.prox-empty-icon { color: var(--muted); opacity: .7; }
.modal-icon { color: var(--warning); }
.us-icon { display: grid; place-items: center; }
.us-icon.loading { animation: none; }
.us-icon.loading .icon { animation: spin 1s linear infinite; }
.prox-dup-flag { display: inline-flex; align-items: center; gap: 2px; color: var(--warning); font-size: var(--text-xs); }
.result-link, .fedit-apply-btn, .btn-restore, .btn-replace, .btn-delete, .replace-cancel, .link-btn { display: inline-flex; align-items: center; gap: 6px; }
.fedit-badge .icon { margin-right: 2px; }
.info-readonly { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr); }
@media (max-width: 700px) { .info-readonly { grid-template-columns: minmax(0, 1fr); } }
.info-readonly dd span { overflow-wrap: anywhere; word-break: normal; }

/* Datos de tablas: texto sobrio (el color queda para estados) */
.num-cell { color: var(--text); }
.prox-table .num-cell.prox-zero, .num-cell.prox-zero { color: var(--muted) !important; }

/* ═══ SCROLL HORIZONTAL ARRIBA DE TODAS LAS MATRICES ═══════════════════════
   Un solo contenedor con scroll (el .table-wrap) y una barra espejo arriba, pegada bajo el encabezado.
   Las dos barras tienen el mismo grosor y recorren exactamente lo mismo. */
.table-wrap, .prox-result-wrap, .editor-table-wrap { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.scroll-superior {
  position: sticky; top: var(--header-h, 68px); z-index: 5;
  overflow-x: auto; overflow-y: hidden; height: 12px; margin-bottom: 6px;
  background: var(--bg); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.scroll-superior > div { height: 1px; }
.scroll-superior::-webkit-scrollbar { height: 10px; }
.scroll-superior::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
.scroll-superior::-webkit-scrollbar-track { background: transparent; }
.table-wrap [style*="overflow-x"], .table-wrap [style*="overflow:auto"] {   /* evita un segundo scroll anidado (Datos Raw tenía el suyo) */
  overflow: visible !important; max-height: none !important; border: 0 !important; border-radius: 0 !important;
}

/* Historial: botón de descarga masiva */
.hist-filters { flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hist-dl-all { margin-left: auto; white-space: nowrap; }
@media (max-width: 700px) { .hist-dl-all { margin-left: 0; } }

/* ═══ VENTANA DE REVISIÓN AMPLIABLE (solo vista previa de Nueva carga) ═══════ */
.vista { position: relative; scroll-margin-top: calc(var(--header-h, 68px) + 12px); }
.vista-tools { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.vista-btn { padding: 6px 12px; font-size: var(--text-sm); }
.vista-grip {
  display: flex; justify-content: center; margin-top: 4px; padding: 2px 0;
  color: var(--muted); cursor: ns-resize; touch-action: none; border-radius: var(--radius-sm);
}
.vista-grip:hover, .vista-grip:focus-visible { color: var(--primary); background: var(--primary-soft); }
.vista.is-ampliada {
  width: calc(100vw - 64px); max-width: 2200px;
  margin-left: calc(50% - 50vw + 32px);              /* sale del ancho de la página y ocupa casi toda la pantalla */
}
.vista.is-ampliada .table-wrap { max-height: calc(100vh - var(--header-h, 68px) - 96px); }
@media (max-width: 640px) { .vista.is-ampliada { width: calc(100vw - 24px); margin-left: calc(50% - 50vw + 12px); } }

/* ═══ MATRICES DE NUEVA CARGA: cuadrícula marcada, encabezados fijos, columnas ajustables ═══════════ */
:is(#tableComposicion, #tableNutricion, #tableProximales, #tableRaw) table { border-collapse: separate; border-spacing: 0; }
:is(#tableComposicion, #tableNutricion, #tableProximales, #tableRaw) :is(th, td) {
  border-right: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;      /* nada se desordena si la columna es angosta */
}
:is(#tableComposicion, #tableNutricion, #tableProximales, #tableRaw) :is(th, td):first-child { border-left: 1px solid var(--grid-line); }
:is(#tableComposicion, #tableNutricion, #tableProximales, #tableRaw) thead th {
  position: sticky; top: 0; z-index: 5; background: var(--grid-header);
  border-top: 1px solid var(--grid-line); border-bottom: 2px solid var(--border-strong);
  font-weight: var(--weight-semibold); color: var(--text-2);
}
:is(#tableComposicion, #tableNutricion, #tableProximales, #tableRaw) thead th.fx,
:is(#tableComposicion, #tableNutricion, #tableProximales, #tableRaw) thead th.prox-fixed-col { z-index: 7; background: var(--grid-header); }
/* alineación: números a la derecha (también su encabezado), texto a la izquierda */
.col-num { text-align: right; }
:is(#tableComposicion, #tableNutricion, #tableProximales, #tableRaw) td.num-cell { text-align: right; }
:is(#tableComposicion, #tableNutricion, #tableProximales, #tableRaw) .prox-header-val { text-align: left; }
:is(#tableComposicion, #tableNutricion, #tableProximales, #tableRaw) td.prox-nutrient { display: table-cell; }
/* Análisis proximal: las filas Dummy / SKU / Modificación / Versión quedan fijas bajo los títulos */
#tableProximales tr.prox-header-row td { position: sticky; top: var(--fila-top, 0); z-index: 4; background: var(--surface-2); }
#tableProximales tr.prox-header-row td.prox-row-label { z-index: 6; left: 0; background: var(--grid-header); }
/* asas para cambiar el ancho de cada columna */
.col-resizer { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 9; touch-action: none; }
.col-resizer::after { content: ''; position: absolute; left: 4px; top: 0; width: 1px; height: 100%; background: transparent; transition: background .1s; }
th:hover > .col-resizer::after { background: var(--grid-line); }
.col-resizer:hover::after, body.resizing-col .col-resizer::after { left: 3px; width: 3px; background: var(--primary); border-radius: 2px; }
body.resizing-col, body.resizing-col * { cursor: col-resize !important; user-select: none; }
body.resizing-marco, body.resizing-marco * { cursor: nwse-resize !important; user-select: none; }

/* esquina para cambiar ancho y alto de la ventana */
.vista-esquina {
  position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; border-radius: 0 0 var(--radius-md) 0;
  background: linear-gradient(135deg, transparent 0 48%, var(--muted) 48% 55%, transparent 55% 68%, var(--muted) 68% 75%, transparent 75%);
  opacity: .65;
}
.vista-esquina:hover, .vista-esquina:focus-visible { opacity: 1; }

:is(#tableComposicion, #tableNutricion, #tableProximales, #tableRaw) td { max-width: none !important; }   /* el ancho lo manda cada columna */
:is(#tableComposicion, #tableNutricion, #tableProximales, #tableRaw) table { min-width: 0; }   /* el ancho total es la suma de las columnas */

/* ═══ HISTORIAL: fórmulas de cada carga ═══════════════════════════════════════ */
.hcard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: var(--text-xs); color: var(--text-2);
}
.hchip strong { font-family: var(--font-mono); font-weight: var(--weight-medium); color: var(--text); }
.hchip > span:not(.hchip-tipo) { font-family: var(--font-mono); color: var(--muted); }
.hchip-tipo, .hform-tipo { padding: 0 6px; border-radius: 4px; background: var(--primary-soft); color: var(--primary); font-weight: var(--weight-medium); font-size: var(--text-xs); }
.hchip-mas { color: var(--muted); }
.hcard-formulas-tabla { margin-bottom: var(--space-4); }
.hform-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.hform-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.hform-table th { text-align: left; padding: 8px 12px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; position: static; }
.hform-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; background: transparent; }
.hform-table tbody tr:last-child td { border-bottom: 0; }
.hform-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.hform-table tbody tr:hover td { background: var(--primary-soft); }
.hform-accion { text-align: right; }
.hform-accion .vista-btn { padding: 4px 10px; }

/* Editar dieta */
.editor-carga-info { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.editor-ro { display: inline-grid; vertical-align: middle; color: var(--muted); }
.editor-val-input:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }

/* Fórmulas duplicadas en la revisión previa */
#duplicadosAlerta:empty { display: none; }
.fedit-badge.dup { color: var(--error); border-color: var(--error-border); background: var(--error-soft); }
.fedit-card.duplicada { border-color: var(--error-border); box-shadow: 0 0 0 1px var(--error-border); }

/* Datos reales en Proximales / Perfil nutricional / Receta */
.alert--info { background: var(--primary-soft); border-color: var(--primary-border); color: #17338f; }
.alert--info .alert__icon { color: var(--primary); }
.fuente-etl { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--text-xs); }
#proxAviso:empty, #nutrAviso:empty, #recAviso:empty { display: none; }

/* ═══ MATRICES DE DATOS (Proximales / Perfil / Receta): encabezado fijo hasta el título de la sección ═══════════
   Quedan fijos los títulos de columna, las filas Dummy…Fuente y la franja "Composición / Receta — una columna por versión";
   solo se desplazan las filas de datos. Los "top" de cada fila los calcula fijarEncabezadoMatriz(). */
:is(#proxTableWrap, #nutrTableWrap, #recTableWrap, #cmpTableWrap) .prox-result-wrap { max-height: max(360px, calc(100vh - var(--header-h, 68px) - 150px)); }
:is(#proxTableWrap, #nutrTableWrap, #recTableWrap, #cmpTableWrap) .prox-table { border-collapse: separate; border-spacing: 0; }
:is(#proxTableWrap, #nutrTableWrap, #recTableWrap, #cmpTableWrap) .prox-col-header th { position: sticky; top: 0; z-index: 8; background: var(--surface); }
:is(#proxTableWrap, #nutrTableWrap, #recTableWrap, #cmpTableWrap) .prox-col-header th.prox-fixed-col { z-index: 10; }
:is(#proxTableWrap, #nutrTableWrap, #recTableWrap, #cmpTableWrap) tr.prox-header-row td { position: sticky; top: var(--fila-top, 0); z-index: 6; background: var(--surface-2); }
:is(#proxTableWrap, #nutrTableWrap, #recTableWrap, #cmpTableWrap) tr.prox-header-row td.prox-row-label { z-index: 9; left: 0; background: var(--grid-header); }
:is(#proxTableWrap, #nutrTableWrap, #recTableWrap, #cmpTableWrap) tr.prox-section-sep td { position: sticky; top: var(--fila-top, 0); z-index: 7; background: var(--surface); box-shadow: 0 2px 0 var(--border-strong); }

/* ═══ MATRICES DE DATOS: tamaño de letra y ventana ajustables ═══════════════════ */
:is(#proxTableWrap, #nutrTableWrap, #recTableWrap, #cmpTableWrap) .prox-table,
:is(#proxTableWrap, #nutrTableWrap, #recTableWrap, #cmpTableWrap) .prox-table :is(th, td, span, button) { font-size: var(--matriz-fs, 12px); }
:is(#proxTableWrap, #nutrTableWrap, #recTableWrap, #cmpTableWrap) .prox-table :is(.prox-col-num, .prox-row-label) { font-size: calc(var(--matriz-fs, 12px) - 1px); }
.vista-tools { align-items: center; gap: var(--space-2); }
.fs-ctrl { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; }
.fs-ctrl .vista-btn { min-width: 40px; padding: 6px 10px; font-weight: var(--weight-semibold); }
.fs-valor { min-width: 52px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--text-sm); cursor: pointer; border-radius: var(--radius-sm); padding: 4px 6px; }
.fs-valor:hover { color: var(--primary); background: var(--primary-soft); }
.fs-ctrl button:disabled { opacity: .4; cursor: default; }
:is(#proxTableWrap, #nutrTableWrap, #recTableWrap, #cmpTableWrap) .vista.is-ampliada .prox-result-wrap { max-height: calc(100vh - var(--header-h, 68px) - 96px); }

/* Receta: fila Total (suma de materias primas por fórmula), siempre visible al pie de la matriz */
.prox-total-row td { position: sticky; bottom: 0; z-index: 6; background: var(--surface); border-top: 2px solid var(--border-strong); font-weight: var(--weight-semibold); }
.prox-total-row td.prox-total-label { left: 0; z-index: 9; }
.prox-total-val { color: var(--text); }
.prox-total-alerta { color: var(--warning, #b45309) !important; background: var(--warning-soft, #fef3c7) !important; }
.prox-total-alerta .icon { margin-right: 4px; vertical-align: -2px; }
#modalDescarga .modal-footer { flex-wrap: wrap; }
.prox-total-row td { padding: 8px 10px; vertical-align: middle; }
.prox-total-row td.prox-total-label { background: var(--surface-2); text-align: left; }

.viz-action-bar { flex-wrap: wrap; gap: var(--space-2); }
.descarga-sel { font-weight: var(--weight-semibold); color: var(--primary); margin-top: -6px; }
.descarga-sel:empty { display: none; }

/* Filtro de filas (nutrientes / materias primas) con selección múltiple */
.filas-filtro { position: relative; margin-bottom: var(--space-3); }
.filas-btn { gap: var(--space-2); }
.filas-btn strong { color: var(--primary); font-weight: var(--weight-semibold); }
.filas-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(420px, 92vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px -8px rgba(16,24,40,.22); padding: var(--space-3);
}
.filas-panel.hidden { display: none; }
.filas-acciones { display: flex; align-items: center; justify-content: space-between; margin: var(--space-2) 0; font-size: var(--text-sm); color: var(--muted); }
.filas-limpiar { border: 0; background: transparent; color: var(--primary); font: inherit; cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm); }
.filas-limpiar:disabled { color: var(--muted); opacity: .5; cursor: default; }
.filas-lista { max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.filas-item { display: flex; align-items: center; gap: var(--space-2); padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); }
.filas-item:hover { background: var(--primary-soft); }
.filas-item input { accent-color: var(--primary); margin: 0; flex-shrink: 0; }
.filas-vacio { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); text-align: center; }

/* ═══ COMPARAR ═══════════════════════════════════════════════════════════════ */
.nav-badge:empty { display: none; }
.nav-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: var(--weight-semibold); }
.pin-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 2px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.pin-btn:hover { color: var(--primary); background: var(--primary-soft); }
.pin-btn.is-fijada { color: var(--primary); background: var(--primary-soft); border-color: var(--primary); }
.pin-btn.is-fijada .icon { fill: currentColor; }
.prox-col-header th:has(.pin-btn) { line-height: 1.1; }
.cmp-filtros { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cmp-head { display: flex; align-items: center; justify-content: center; gap: 2px; }
.cmp-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.cmp-btn:hover:not(:disabled) { color: var(--primary); background: var(--primary-soft); }
.cmp-btn:disabled { opacity: .3; cursor: default; }
.cmp-quitar:hover:not(:disabled) { color: var(--error, #c0362c); background: var(--error-soft, #fdecea); }
th.cmp-col { cursor: grab; }
th.cmp-col.is-arrastrada { opacity: .45; }
th.cmp-col.cmp-destino { box-shadow: inset 3px 0 0 var(--primary); background: var(--primary-soft); }
#cmpTableWrap .cmp-total td { padding: 8px 10px; background: var(--surface-2); border-top: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong); font-weight: var(--weight-semibold); vertical-align: middle; }
#cmpTableWrap .cmp-total td.prox-total-label { position: sticky; left: 0; z-index: 2; text-align: left; }
#cmpTableWrap .cmp-total td.prox-total-alerta { background: var(--warning-soft, #fef3c7) !important; }
.prox-stat-num small { font-size: var(--text-sm); color: var(--muted); font-weight: var(--weight-regular, 400); }
:is(#proxTableWrap, #nutrTableWrap, #recTableWrap, #cmpTableWrap) tr.prox-section-sep.prox-sep-libre td { position: static; box-shadow: none; }

/* Completar perfil / receta */
.modal--completar { width: min(560px, 94vw); }
.modal--completar .modal-body { margin-bottom: var(--space-3); }
.completar-archivo { width: 100%; padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); font: inherit; cursor: pointer; }
.completar-estado { margin-top: var(--space-3); text-align: left; }
.completar-estado ul { margin: 6px 0 0 18px; padding: 0; }
.cmp-estado { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--muted); }
.cmp-ok, .cmp-agregado { color: var(--ok, #1a7f4b); }
.cmp-agregado { flex-wrap: wrap; justify-content: center; }
.cmp-completar { border-color: var(--warning-border, #f1d4a8); background: var(--warning-soft, #fdf3e4); color: var(--warning, #b45309); white-space: normal; }
.hcard-tipo.complemento, .hbadge.complemento { background: var(--primary-soft); color: var(--primary); }

.completar-ejemplo { margin: 0 auto var(--space-3); }

/* Comparar: qué mostrar (receta, perfil o ambas) */
.cmp-ver { align-items: center; gap: 2px; padding: 3px; margin-bottom: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cmp-ver-lbl { padding: 0 var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.cmp-ver button { padding: 6px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.cmp-ver button:hover { background: var(--primary-soft); color: var(--primary); }
.cmp-ver button.is-activo { background: var(--primary); color: #fff; font-weight: var(--weight-semibold); }
.filas-filtro[hidden] { display: none !important; }