/* ====================================================================
   WLC · Caderno Secreto — +20 Tabelas comparativas
   Modelos variados · namespace tx-
   Paleta de marca, hairlines quentes, numerais Chaloopswoo.
   ==================================================================== */

.tx-card { background: var(--wlc-white); border: 1px solid var(--wlc-border-warm); border-radius: var(--radius-card,20px); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.tx-title { font: 700 11px/1 var(--font-sans); letter-spacing:0.14em; text-transform:uppercase; color:var(--fg3); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.tx-title__ic { width:14px; height:14px; color:var(--wlc-imperial-red); display:inline-flex; flex-shrink:0; }
.tx-title__ic svg { width:100%; height:100%; }
.tx-num { font-family:var(--font-numeral); }

/* ── MODELO α · STRIPED (cabeçalho colorido + zebra) ── */
.tx-striped { width:320px; }
.tx-striped table { width:100%; border-collapse:collapse; }
.tx-striped thead th { font:700 9px/1.2 var(--font-sans); letter-spacing:0.05em; text-transform:uppercase; color:#fff; padding:9px 8px; text-align:center; }
.tx-striped thead th:first-child { text-align:left; border-radius:8px 0 0 0; }
.tx-striped thead th:last-child { border-radius:0 8px 0 0; }
.tx-striped tbody td { padding:9px 8px; font:600 11px/1.2 var(--font-sans); color:var(--fg2); text-align:center; }
.tx-striped tbody td:first-child { text-align:left; color:var(--fg1); font-weight:700; }
.tx-striped tbody tr:nth-child(even) { background:var(--wlc-cream); }
.tx-striped .tx-hi { color:var(--wlc-imperial-red); font-weight:800; }

/* ── MODELO β · RATING DOTS ── */
.tx-dots { width:300px; }
.tx-dots__row { display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; align-items:center; gap:8px; padding:9px 0; border-top:1px solid var(--wlc-border-warm); }
.tx-dots__row--head { border-top:none; padding-bottom:4px; }
.tx-dots__h { font:700 8px/1.2 var(--font-sans); letter-spacing:0.04em; text-transform:uppercase; color:var(--fg3); text-align:center; }
.tx-dots__h--l { text-align:left; }
.tx-dots__name { font:700 11px/1.2 var(--font-sans); color:var(--fg1); }
.tx-dots__dots { display:flex; gap:3px; justify-content:center; }
.tx-dots__d { width:8px; height:8px; border-radius:50%; background:var(--wlc-border-warm); }
.tx-dots__d--on { background:var(--wlc-skobeloff); }
.tx-dots__d--y { background:var(--wlc-chinese-yellow); }
.tx-dots__d--r { background:var(--wlc-imperial-red); }

/* ── MODELO γ · RANKED (medalhas) ── */
.tx-rank { width:290px; }
.tx-rank__row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--wlc-border-warm); }
.tx-rank__row:first-of-type { border-top:none; }
.tx-rank__medal { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:700 12px/1 var(--font-numeral); color:#fff; flex-shrink:0; }
.tx-rank__m1 { background:var(--wlc-chinese-yellow); color:var(--wlc-space-cadet); }
.tx-rank__m2 { background:var(--wlc-powder-blue); color:var(--wlc-space-cadet); }
.tx-rank__m3 { background:var(--wlc-terra-cotta); }
.tx-rank__mx { background:var(--wlc-border-warm); color:var(--fg3); }
.tx-rank__name { font:700 13px/1.15 var(--font-sans); color:var(--fg1); flex:1; }
.tx-rank__name small { display:block; font:500 10px/1.2 var(--font-sans); color:var(--fg3); margin-top:2px; }
.tx-rank__val { font:700 14px/1 var(--font-numeral); color:var(--wlc-space-cadet); text-align:right; }
.tx-rank__val span { display:block; font:600 8px/1 var(--font-sans); letter-spacing:0.05em; text-transform:uppercase; color:var(--fg3); margin-top:3px; }

/* ── MODELO δ · RANGE BARS (faixa min–max) ── */
.tx-range { width:300px; }
.tx-range__row { padding:10px 0; border-top:1px solid var(--wlc-border-warm); }
.tx-range__row:first-of-type { border-top:none; }
.tx-range__top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.tx-range__name { font:700 12px/1.1 var(--font-sans); color:var(--fg1); }
.tx-range__val { font:700 12px/1 var(--font-numeral); color:var(--wlc-imperial-red); }
.tx-range__track { height:8px; border-radius:99px; background:var(--wlc-cream); border:1px solid var(--wlc-border-warm); position:relative; }
.tx-range__fill { position:absolute; top:-1px; bottom:-1px; border-radius:99px; }

/* ── MODELO ε · CHECK MATRIX (✓ / ✗ / parcial) ── */
.tx-mtx { width:330px; }
.tx-mtx__grid { display:grid; }
.tx-mtx__hc { font:700 9px/1.15 var(--font-sans); letter-spacing:0.03em; text-transform:uppercase; color:var(--fg3); text-align:center; padding:0 4px 10px; }
.tx-mtx__hc--l { text-align:left; }
.tx-mtx__feat { font:600 11px/1.2 var(--font-sans); color:var(--fg1); padding:9px 6px 9px 0; border-top:1px solid var(--wlc-border-warm); display:flex; align-items:center; }
.tx-mtx__cell { display:flex; align-items:center; justify-content:center; padding:9px 0; border-top:1px solid var(--wlc-border-warm); }
.tx-mtx__y svg { width:15px; height:15px; color:var(--wlc-skobeloff); }
.tx-mtx__n { width:11px; height:2px; border-radius:2px; background:var(--wlc-border-warm); }
.tx-mtx__p { width:9px; height:9px; border-radius:50%; border:2px solid var(--wlc-chinese-yellow); }
.tx-mtx__txt { font:700 10px/1 var(--font-sans); color:var(--fg2); }

/* ── MODELO ζ · VERSUS 3-VIAS (colunas com destaque) ── */
.tx-v3 { width:322px; }
.tx-v3__head { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; }
.tx-v3__hc { text-align:center; padding:9px 4px; border-radius:10px 10px 0 0; font:700 10px/1.15 var(--font-sans); }
.tx-v3__hc--l { text-align:left; color:var(--fg3); font-size:8px; letter-spacing:0.05em; text-transform:uppercase; display:flex; align-items:flex-end; }
.tx-v3__row { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; }
.tx-v3__rh { font:600 11px/1.2 var(--font-sans); color:var(--fg1); padding:9px 6px 9px 0; border-top:1px solid var(--wlc-border-warm); display:flex; align-items:center; }
.tx-v3__c { font:700 11px/1.1 var(--font-numeral); color:var(--fg2); text-align:center; padding:9px 4px; border-top:1px solid var(--wlc-border-warm); display:flex; align-items:center; justify-content:center; }
.tx-v3__c--tint { background:rgba(231,64,65,0.05); }

/* ── MODELO η · TAG CELLS (pílulas coloridas) ── */
.tx-tag { width:316px; }
.tx-tag__grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; }
.tx-tag__hc { font:700 8px/1.15 var(--font-sans); letter-spacing:0.04em; text-transform:uppercase; color:var(--fg3); text-align:center; padding:0 4px 10px; }
.tx-tag__hc--l { text-align:left; }
.tx-tag__rh { font:700 11px/1.2 var(--font-sans); color:var(--fg1); padding:10px 6px 10px 0; border-top:1px solid var(--wlc-border-warm); display:flex; align-items:center; }
.tx-tag__cell { padding:10px 4px; border-top:1px solid var(--wlc-border-warm); display:flex; align-items:center; justify-content:center; }
.tx-pill { font:700 9px/1 var(--font-sans); letter-spacing:0.04em; text-transform:uppercase; padding:5px 9px; border-radius:99px; color:#fff; white-space:nowrap; }
.tx-pill--y { background:var(--wlc-chinese-yellow); color:var(--wlc-space-cadet); }
.tx-pill--g { background:var(--wlc-skobeloff); }
.tx-pill--r { background:var(--wlc-imperial-red); }
.tx-pill--b { background:var(--wlc-green-blue); }
.tx-pill--soft { background:var(--wlc-border-warm); color:var(--fg2); }

/* ── MODELO θ · DUELO (cara a cara, 2 colunas) ── */
.tx-duel { width:300px; }
.tx-duel__head { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-bottom:12px; }
.tx-duel__side { text-align:center; font:800 14px/1.1 var(--font-sans); color:var(--fg1); }
.tx-duel__vs { width:28px; height:28px; border-radius:50%; background:var(--wlc-space-cadet); color:#fff; font:700 11px/1 var(--font-sans); display:flex; align-items:center; justify-content:center; }
.tx-duel__row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--wlc-border-warm); }
.tx-duel__v { font:700 13px/1 var(--font-numeral); color:var(--fg2); }
.tx-duel__v--l { text-align:right; }
.tx-duel__v--r { text-align:left; }
.tx-duel__v--win { color:var(--wlc-imperial-red); }
.tx-duel__m { font:600 8px/1 var(--font-sans); letter-spacing:0.05em; text-transform:uppercase; color:var(--fg3); text-align:center; white-space:nowrap; }
