/* ============================================================================
   Home lanzador + Mesa de Solicitudes como eje. Scopeado a #sec-home.
   Identidad copper: tokens --cw-* (copper-direccion-visual.css) con fallback.
   Reversible: quitar el <link>. Maqueta: home-eje-mesa-mockup.html.
   ============================================================================ */
#sec-home {
  --hm-bad: var(--cw-bad, #e0603e);
  --hm-ok: var(--cw-ok, #3fae6b);
  --hm-warn: var(--cw-warn, #e0a13a);
  --hm-info: var(--cw-info, #7c8cf0);
  --hm-accent: var(--cw-accent, #c97c2e);
  --hm-accent-2: var(--cw-accent-2, #e0952e);
  --hm-panel: var(--cw-panel, #0f0e0c);
  --hm-raised: var(--cw-panel-raised, #141310);
  --hm-raised2: #17150f;
  --hm-border: var(--cw-border, #211f19);
  --hm-border-soft: var(--cw-border-soft, #191710);
  --hm-hair: #26231b;
  --hm-text: var(--cw-text, #f2efe8);
  --hm-dim: var(--cw-text-dim, #b8b3a8);
  --hm-mute: var(--cw-text-mute, #7a746a);
  --hm-faint: var(--cw-text-faint, #4a4840);
  --hm-disp: var(--cw-font-display, 'Fraunces', Georgia, serif);
  --hm-mono: var(--cw-font-mono, 'JetBrains Mono', ui-monospace, monospace);
}

/* chips de salud (reemplazan los 4 KPIs sueltos) */
#sec-home .hm-chips { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
#sec-home .hm-chip { background:var(--hm-panel); border:1px solid var(--hm-border); border-radius:10px; padding:8px 14px; text-align:center; min-width:88px; }
#sec-home .hm-chip .n { font-family:var(--hm-disp); font-size:20px; line-height:1; color:var(--hm-text); }
#sec-home .hm-chip .n.alert { color:var(--hm-bad); }
#sec-home .hm-chip .n.warn { color:var(--hm-warn); }
#sec-home .hm-chip .l { font-family:var(--hm-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--hm-mute); margin-top:4px; }

/* ===== EJE: MESA ===== */
#sec-home .hm-mesa { border:1px solid rgba(201,124,46,.28); border-radius:20px; background:linear-gradient(180deg,rgba(201,124,46,.05),transparent 40%),var(--hm-panel); overflow:hidden; box-shadow:0 24px 60px -34px rgba(201,124,46,.4); }
#sec-home .hm-loading { padding:40px 22px; text-align:center; color:var(--hm-mute); font-family:var(--hm-mono); font-size:13px; }
#sec-home .hm-mesa-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:18px 22px; border-bottom:1px solid var(--hm-border-soft); }
#sec-home .hm-mesa-head .t { font-family:var(--hm-disp); font-size:22px; display:flex; align-items:center; gap:11px; color:var(--hm-text); }
#sec-home .hm-doms { display:flex; gap:7px; flex-wrap:wrap; }
#sec-home .hm-dom { font-family:var(--hm-mono); font-size:11px; color:var(--hm-mute); background:var(--hm-raised2); border:1px solid var(--hm-border); border-radius:999px; padding:5px 12px; display:flex; align-items:center; gap:7px; }
#sec-home .hm-dom .c { font-weight:700; color:var(--hm-dim); }
#sec-home .hm-dom .dot { width:7px; height:7px; border-radius:50%; }
#sec-home .hm-prio-lbl { padding:14px 22px 6px; font-family:var(--hm-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--hm-bad); }

#sec-home .hm-row { display:grid; grid-template-columns:auto 1fr auto auto; gap:14px; align-items:center; padding:13px 22px; border-left:3px solid var(--dm,var(--hm-accent)); }
#sec-home .hm-row + .hm-row { border-top:1px solid var(--hm-border-soft); }
#sec-home .hm-row:hover { background:var(--hm-raised); }
#sec-home .hm-row.ember { position:relative; }
#sec-home .hm-row.ember::before { content:""; position:absolute; inset:0; box-shadow:inset 3px 0 12px -6px rgba(224,96,62,.6); pointer-events:none; }
#sec-home .hm-badge-t { font-family:var(--hm-mono); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:6px; border:1px solid transparent; white-space:nowrap; }
#sec-home .hm-badge-t.cierre { color:var(--hm-ok); background:rgba(63,174,107,.10); border-color:rgba(63,174,107,.28); }
#sec-home .hm-badge-t.sep { color:var(--hm-info); background:rgba(124,140,240,.10); border-color:rgba(124,140,240,.28); }
#sec-home .hm-badge-t.conduce { color:var(--hm-accent-2); background:rgba(224,149,46,.10); border-color:rgba(224,149,46,.30); }
#sec-home .hm-row .u { font-family:var(--hm-disp); font-size:15px; color:var(--hm-text); }
#sec-home .hm-row .u .vin { font-family:var(--hm-mono); font-size:11px; color:var(--hm-mute); margin-left:8px; }
#sec-home .hm-row .meta { font-family:var(--hm-mono); font-size:11px; color:var(--hm-mute); margin-top:2px; }
#sec-home .hm-age { font-family:var(--hm-mono); font-size:11px; color:var(--hm-dim); text-align:right; white-space:nowrap; }
#sec-home .hm-age .d { font-family:var(--hm-disp); font-size:16px; display:block; line-height:1; }
#sec-home .hm-age.old .d { color:var(--hm-bad); }
#sec-home .hm-age.mid .d { color:var(--hm-warn); }
#sec-home .hm-act { display:flex; gap:7px; }
#sec-home .hm-btn { font-family:var(--hm-mono); font-size:11px; padding:7px 12px; border-radius:8px; border:1px solid var(--hm-border); background:transparent; color:var(--hm-dim); cursor:pointer; white-space:nowrap; }
#sec-home .hm-btn.primary { color:#0d0c0a; background:var(--hm-accent-2); border-color:var(--hm-accent-2); font-weight:700; }

#sec-home .hm-degraded { display:flex; align-items:center; gap:12px; padding:12px 22px; border-left:3px solid var(--hm-warn); color:var(--hm-warn); font-family:var(--hm-mono); font-size:12px; }
#sec-home .hm-degraded b { color:var(--hm-warn); }
#sec-home .hm-degraded .hm-btn { margin-left:auto; color:var(--hm-warn); border-color:rgba(224,161,58,.4); }

#sec-home .hm-mesa-foot { padding:14px 22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; border-top:1px solid var(--hm-border-soft); }
#sec-home .hm-mesa-foot .rest { font-family:var(--hm-mono); font-size:11.5px; color:var(--hm-mute); }
#sec-home .hm-btn-big { font-family:var(--hm-mono); font-size:12px; font-weight:700; padding:10px 18px; border-radius:10px; border:1px solid rgba(201,124,46,.4); background:rgba(201,124,46,.12); color:var(--hm-accent-2); cursor:pointer; }

/* ===== HERRAMIENTAS (cuadritos) ===== */
#sec-home .hm-group { margin-top:30px; }
#sec-home .hm-g-head { display:flex; align-items:baseline; gap:10px; margin:0 2px 13px; }
#sec-home .hm-g-head .t { font-family:var(--hm-disp); font-size:16px; color:var(--hm-text); }
#sec-home .hm-g-head .e { font-family:var(--hm-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--hm-accent-2); }
#sec-home .hm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:13px; }
#sec-home .hm-tile { position:relative; background:linear-gradient(180deg,var(--hm-raised),var(--hm-panel)); border:1px solid var(--hm-border); border-radius:15px; padding:16px; cursor:pointer; transition:transform .16s ease, border-color .16s ease; }
#sec-home .hm-tile:hover { transform:translateY(-3px); border-color:var(--hm-hair); }
#sec-home .hm-ico { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; background:var(--hm-raised2); border:1px solid var(--hm-border); margin-bottom:11px; }
#sec-home .hm-ttl { font-family:var(--hm-disp); font-size:15.5px; line-height:1.15; color:var(--hm-text); }
#sec-home .hm-desc { font-family:var(--hm-mono); font-size:11px; color:var(--hm-mute); margin-top:5px; line-height:1.4; min-height:29px; }
#sec-home .hm-go { font-family:var(--hm-mono); font-size:10px; letter-spacing:.05em; color:var(--hm-faint); margin-top:10px; }
#sec-home .hm-tile:hover .hm-go { color:var(--hm-accent-2); }
#sec-home .hm-badge { position:absolute; top:13px; right:13px; font-family:var(--hm-mono); font-size:11px; font-weight:800; min-width:24px; height:22px; padding:0 7px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.05); color:var(--hm-dim); border:1px solid var(--hm-border); }
#sec-home .hm-badge.alert { background:rgba(224,96,62,.14); color:var(--hm-bad); border-color:rgba(224,96,62,.4); }
#sec-home .hm-badge.warn { background:rgba(224,161,58,.12); color:var(--hm-warn); border-color:rgba(224,161,58,.35); }

@media (prefers-reduced-motion:reduce) { #sec-home * { animation:none !important; transition:none !important; } }
