/* resiter/css/60-hub-cuerpo.css — Cuerpo claro del hub, validación de proveedores y filtro multi-selección.
   Forma parte del CSS único de index.html (orden R2): se carga en el orden de los <link>; al editar este archivo,
   subir su ?v= en index.html. */
/* ══════════════════════════════════════════════════
   HUB BODY — PROPUESTA B
══════════════════════════════════════════════════ */

/* Overrides del hub-body: sin padding dark, surface claro */
.hub-body {
  background: #f4f7fb !important;
  padding: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── HERO ─────────────────────────────────────── */
.hb-hero {
  background: #073763;
  position: relative; overflow: hidden;
  padding: 32px 28px 0;
}
.hb-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #0e81c5 0%, #3ea8e5 60%, transparent 100%);
}
.hb-arc {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(14,129,197,0.14); pointer-events: none;
}
.hb-arc-1 { width: 700px; height: 700px; right: -200px; top: -340px; }
.hb-arc-2 { width: 520px; height: 520px; right: -120px; top: -240px; }
.hb-arc-3 { width: 360px; height: 360px; right: -50px;  top: -155px; }
.hb-arc-4 { width: 210px; height: 210px; right:  20px;  top: -60px; border-color: rgba(14,129,197,0.24); }
.hb-glow {
  position: absolute; right: -80px; top: -100px;
  width: 560px; height: 460px;
  background: radial-gradient(ellipse at 60% 40%, rgba(14,129,197,0.20) 0%, transparent 68%);
  pointer-events: none;
}
.hb-hero-inner {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; gap: 32px;
}
.hb-hero-left { flex: 1; }
.hb-eyebrow {
  font-size: 10px; font-weight: 700; color: #3ea8e5;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
}
.hb-eyebrow::before { content:''; width:20px; height:2px; background:#0e81c5; border-radius:1px; }
.hb-title {
  font-size: 28px; font-weight: 900; color: #fff;
  line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 14px;
  font-family: 'Montserrat', sans-serif;
}
.hb-title em { font-style: normal; color: #3ea8e5; }
.hb-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hb-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85);
}
.hb-chip svg { width: 13px; height: 13px; stroke: #3ea8e5; fill: none; stroke-width: 2; }
/* Stat cards hero */
.hb-stat-cards { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; width: 200px; }
.hb-stat-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 14px 16px;
  cursor: pointer; transition: background .18s;
  border-left: 3px solid transparent;
}
.hb-stat-card:hover { background: rgba(255,255,255,0.12); }
.hb-sc-green { border-left-color: #0f9d6e; }
.hb-sc-blue  { border-left-color: #3ea8e5; }
.hb-sc-amber { border-left-color: #f5a623; }
.hb-sc-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 5px; font-family: 'Montserrat', sans-serif; }
.hb-sc-val   { font-size: 24px; font-weight: 900; color: #fff; line-height: 1; font-family: 'Montserrat', sans-serif; }
.hb-sc-sub   { font-size: 10px; color: rgba(255,255,255,.4); margin-top: 3px; }
/* Ola */
.hb-wave { position: relative; z-index: 2; margin-top: 20px; line-height: 0; }
.hb-wave svg { width: 100%; display: block; }

/* ── SURFACE (contenido blanco) ──────────────── */
.hb-surface { padding: 20px 28px 40px; }

/* ── KPI BAR ─────────────────────────────────── */
.hb-kpi-bar {
  display: grid; grid-template-columns: repeat(6,1fr); gap: 12px;
  margin-bottom: 18px;
}
:root {
  --hb-t3: #7a90a8;
}
.hb-kpi {
  background: #fff; border-radius: 10px;
  border: 1px solid rgba(7,55,99,0.10); padding: 16px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.hb-kpi:hover { box-shadow: 0 4px 20px rgba(7,55,99,0.12); transform: translateY(-2px); }
.hb-kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.hb-kpi-1::before { background: #0e81c5; }
.hb-kpi-2::before { background: #0f9d6e; }
.hb-kpi-3::before { background: #f5a623; }
.hb-kpi-4::before { background: #c5282a; }
.hb-kpi-5::before { background: #6c3db5; }
.hb-kpi-6::before { background: #073763; }
.hb-kpi-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.hb-kpi-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.hb-kpi-1 .hb-kpi-icon { background:rgba(14,129,197,.10); }
.hb-kpi-2 .hb-kpi-icon { background:rgba(15,157,110,.10); }
.hb-kpi-3 .hb-kpi-icon { background:rgba(245,166,35,.10); }
.hb-kpi-4 .hb-kpi-icon { background:rgba(197,40,42,.10); }
.hb-kpi-5 .hb-kpi-icon { background:rgba(108,61,181,.10); }
.hb-kpi-6 .hb-kpi-icon { background:rgba(7,55,99,.10); }
.hb-kpi-icon svg { width:15px; height:15px; fill:none; stroke-width:2; }
.hb-kpi-1 .hb-kpi-icon svg { stroke:#0e81c5; }
.hb-kpi-2 .hb-kpi-icon svg { stroke:#0f9d6e; }
.hb-kpi-3 .hb-kpi-icon svg { stroke:#f5a623; }
.hb-kpi-4 .hb-kpi-icon svg { stroke:#c5282a; }
.hb-kpi-5 .hb-kpi-icon svg { stroke:#6c3db5; }
.hb-kpi-6 .hb-kpi-icon svg { stroke:#073763; }
.hb-kpi-pill { font-size:9px; font-weight:800; padding:2px 7px; border-radius:10px; }
.hb-pill-up   { background:rgba(15,157,110,.12); color:#0f9d6e; }
.hb-pill-down { background:rgba(197,40,42,.10);  color:#c5282a; }
.hb-pill-flat { background:rgba(14,129,197,.10); color:#0e81c5; }
.hb-kpi-val  { font-size:26px; font-weight:900; color:#1a2740; line-height:1; font-family:'Montserrat',sans-serif; }
.hb-kpi-lbl  { font-size:10px; font-weight:700; color:var(--hb-t3); margin-top:5px; text-transform:uppercase; letter-spacing:.07em; }
.hb-kpi-foot { font-size:10px; color:var(--hb-t3); margin-top:8px; padding-top:8px; border-top:1px solid rgba(7,55,99,.08); font-weight:500; }

/* ── PANELS ──────────────────────────────────── */
.hb-panels { display:grid; grid-template-columns:1fr 340px; gap:14px; }
.hb-panel { background:#fff; border-radius:14px; border:1px solid rgba(7,55,99,.10); overflow:hidden; }
.hb-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid rgba(7,55,99,.08);
}
.hb-panel-title { font-size:13px; font-weight:800; color:#1a2740; display:flex; align-items:center; gap:8px; font-family:'Montserrat',sans-serif; }
.hb-panel-title svg { width:15px; height:15px; stroke:#073763; fill:none; stroke-width:1.8; }
.hb-panel-title small { color:var(--hb-t3); font-weight:500; font-size:11px; }
.hb-panel-action { font-size:11px; font-weight:700; color:#0e81c5; cursor:pointer; display:flex; align-items:center; gap:4px; }
.hb-panel-action svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2.5; }

/* Feed list — usa estilos originales del JS, solo ajustamos el contenedor */
.hb-feed-table { padding: 0; }
.hub-feed-list.hb-feed-table .hub-feed-item {
  padding: 10px 20px;
  border-bottom: 1px solid rgba(7,55,99,.06);
}
.hub-feed-list.hb-feed-table .hub-feed-item:last-child { border-bottom: none; }
.hub-feed-list.hb-feed-table .hub-feed-item:hover { background: rgba(7,55,99,.03); }
.hub-feed-list.hb-feed-table .hub-feed-text { color: #1a2740; font-size: 12px; }
.hub-feed-list.hb-feed-table .hub-feed-text strong { color: #073763; }
.hub-feed-list.hb-feed-table .hub-feed-time { color: #7a90a8; }
.hub-feed-list.hb-feed-table .hub-feed-ok { color: #0f9d6e; }
.hub-feed-empty { padding: 24px 20px; color: var(--hb-t3); font-size: 12px; text-align: center; }

/* Acceso rápido grid */
.hb-right-panels { display:flex; flex-direction:column; gap:14px; }
.hb-quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px 18px; }
.hb-quick-btn {
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border-radius:8px;
  border:1px solid rgba(7,55,99,.10); cursor:pointer;
  background:#f4f7fb; transition:all .18s;
  font-size:11px; font-weight:700; color:#073763;
  font-family:'Montserrat',sans-serif;
}
.hb-quick-btn:hover { background:#073763; color:#fff; box-shadow:0 2px 12px rgba(7,55,99,.15); }
.hb-quick-btn svg { width:14px; height:14px; flex-shrink:0; stroke:#0e81c5; fill:none; stroke-width:1.8; }
.hb-quick-btn:hover svg { stroke:rgba(255,255,255,.8); }

/* Print overlay */
#print-report-overlay{display:none;position:fixed;inset:0;z-index:9999;background:#fff;overflow:auto}
@media print{
  body>*:not(#print-report-overlay){display:none!important}
  #print-report-overlay{display:block!important;position:static!important}
  #print-report-overlay *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ── VALIDACIÓN PROVEEDORES ───────────────────── */
.val-upload-card{border:2px dashed var(--border);border-radius:var(--r);padding:22px 14px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.val-upload-card:hover{border-color:#4A6FA5;background:rgba(74,111,165,.06)}
.val-upload-card.loaded{border-style:solid;border-color:#16a34a;background:rgba(22,163,74,.05)}
.val-prov-tag{display:inline-block;padding:2px 7px;border-radius:20px;font-size:9px;font-weight:700;letter-spacing:.04em}
.val-prov-primax{background:#FFF3CD;color:#856404}
.val-prov-redcol{background:#D1E7DD;color:#0A3622}
.val-prov-cm{background:#CFF4FC;color:#055160}
.val-badge{display:inline-block;padding:2px 7px;border-radius:20px;font-size:9px;font-weight:700;white-space:nowrap}
.val-badge-ok{background:#dcfce7;color:#166534}
.val-badge-yellow{background:#fef9c3;color:#854d0e}
.val-badge-none{background:#fee2e2;color:#991b1b}
.val-badge-alert{background:#ede9fe;color:#5b21b6}
.val-badge-aprobado{background:#dbeafe;color:#1e40af}
.val-badge-revisar{background:#ffedd5;color:#9a3412}
.val-row-ok>td{background:rgba(22,163,74,.06)}
.val-row-yellow>td{background:rgba(234,179,8,.09)}
.val-row-revisar>td{background:rgba(234,88,12,.08)}
.val-row-none>td{background:rgba(220,38,38,.06)}
.val-row-alert>td{background:rgba(124,58,237,.07)}
.val-row-aprobado>td{background:rgba(74,111,165,.06);opacity:.8}
.val-diff-pill{font-size:9px;padding:1px 5px;border-radius:10px;background:#fef9c3;color:#92400e;font-family:var(--font-mono)}

/* ── Filtro multi-selección (checkboxes) — Año/Mes en Evolución mensual ── */
.trend-msel{position:relative;display:inline-block}
.trend-msel-pop{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 4px;box-shadow:0 8px 24px rgba(0,0,0,.18);max-height:200px;overflow-y:auto;min-width:130px}
.trend-msel-pop.open{display:block}
.trend-msel-pop label{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:11px;color:var(--text);cursor:pointer;border-radius:5px;white-space:nowrap}
.trend-msel-pop label:hover{background:var(--bg)}
.trend-msel-pop input[type="checkbox"]{margin:0;cursor:pointer}
.trend-msel-pop .tmsel-actions{display:flex;gap:4px;padding:2px 4px 6px;border-bottom:1px solid var(--border);margin-bottom:4px}
.trend-msel-pop .tmsel-actions button{flex:1;font-size:9px;padding:3px 4px;border:1px solid var(--border);background:var(--bg);color:var(--text2);border-radius:5px;cursor:pointer}