/* ═══════════════════════════════════════════════════
   GUIADASH.CSS — Dashboard Guías Comparativo
   /assets/css/guiadash.css
═══════════════════════════════════════════════════ */

/* ── PILL TABS ── */
.svc-pills { display:flex; gap:6px; flex-wrap:wrap; }
.svc-pill {
    font-size:.65rem; font-family:var(--mono); padding:3px 12px;
    border-radius:20px; border:1px solid var(--border-2);
    background:transparent; color:var(--text-3);
    cursor:pointer; transition:all .2s; letter-spacing:.04em;
}
.svc-pill:hover { border-color:var(--accent-b); color:var(--accent-b); }
.svc-pill.on    { background:var(--accent-b); border-color:var(--accent-b); color:#fff; }

/* ── VARIACIÓN BADGE ── */
.var-up   { color:var(--accent-g); }
.var-down { color:var(--accent-r); }
.var-neu  { color:var(--text-3); }

/* ── CHART LEGEND ── */
.ch-legend {
    display:flex; gap:14px; flex-wrap:wrap; margin-bottom:.6rem;
}
.ch-legend span {
    font-size:.65rem; font-family:var(--mono); color:var(--text-2);
    display:flex; align-items:center; gap:5px;
}
.leg-line {
    width:18px; height:2px; border-radius:1px; display:inline-block;
}
.leg-dashed {
    background:repeating-linear-gradient(
        90deg,currentColor 0,currentColor 5px,transparent 5px,transparent 9px
    );
}

/* ── YEAR SELECTOR ── */
.year-vs { display:flex; align-items:center; gap:8px; }
.year-vs span {
    font-size:.7rem; font-family:var(--mono); color:var(--text-3);
}

/* ── DELTA CHIP ── */
.delta-chip {
    display:inline-flex; align-items:center; gap:3px;
    font-size:.6rem; font-family:var(--mono); padding:2px 7px;
    border-radius:20px; font-weight:600;
}
.delta-up  {
    background:rgba(0,214,143,.1);
    color:var(--accent-g);
    border:1px solid rgba(0,214,143,.2);
}
.delta-down {
    background:rgba(244,63,94,.1);
    color:var(--accent-r);
    border:1px solid rgba(244,63,94,.2);
}
.delta-neu {
    background:rgba(139,155,180,.1);
    color:var(--text-3);
    border:1px solid var(--border);
}