/* ═══════════════════════════════════════════════════════════════════
   MecLine LATAM — mecline_components.css
   Proyecto: Voryn Energy / MecLine LATAM
   Prefijo: mecline_  |  NO mezclar con DimElec, TerraDoc ni Landing Voryn
   ═══════════════════════════════════════════════════════════════════ */

/* ══ CONJUNTOS CONSTRUCTIVOS ═════════════════════════════════════ */
.conj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.conj-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:box-shadow .2s}
.conj-card:hover{box-shadow:var(--sh-md)}
.conj-card.selected{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-dim)}
.conj-top{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.conj-codigo{font-size:9.5px;font-family:var(--f-mono);font-weight:700;color:var(--t3);letter-spacing:.5px}
.conj-nombre{font-size:12.5px;font-weight:700;font-family:var(--f-display);color:var(--t1);margin-top:2px;line-height:1.3}
.conj-body{padding:10px 14px;background:var(--bg2);display:flex;flex-direction:column;gap:6px}
.conj-tag-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.conj-tag{font-size:9.5px;font-family:var(--f-mono);font-weight:600;padding:2px 6px;border-radius:3px;background:var(--bg3);color:var(--t2)}
.conj-row{display:flex;justify-content:space-between;font-size:11.5px;align-items:center}
.conj-lbl{color:var(--t3)}.conj-val{font-family:var(--f-mono);font-weight:600;color:var(--t1);font-size:11px}
.conj-footer{padding:8px 14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:6px;justify-content:space-between}
.conj-comp{display:flex;gap:3px;flex-wrap:wrap}
.comp-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);opacity:.6;cursor:default;transition:opacity .15s}
.comp-dot:hover{opacity:1}

/* ══ VALIDACIÓN CONSTRUCTIVA ═════════════════════════════════════ */
.val-tabla{width:100%;border-collapse:collapse;font-size:12px}
.val-tabla th{text-align:left;padding:6px 10px;background:var(--bg3);font-size:10px;font-weight:700;font-family:var(--f-display);color:var(--t2);border:1px solid var(--line)}
.val-tabla td{padding:6px 10px;border:1px solid var(--line);font-family:var(--f-mono);font-size:11.5px}
.val-tabla td.lc{font-family:var(--f-body);color:var(--t2)}
.val-ok{color:var(--ok);font-weight:700}.val-warn{color:var(--warn);font-weight:700}.val-no{color:var(--err);font-weight:700}

/* ══ PLANES / PRICING ════════════════════════════════════════════ */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:4px}
.plan-card{border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;background:var(--bg1);position:relative;transition:box-shadow .2s}
.plan-card:hover{box-shadow:var(--sh-md)}
.plan-card.featured{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-dim)}
.plan-banner{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:9px;font-weight:700;font-family:var(--f-display);padding:3px 12px;border-radius:0 0 8px 8px;letter-spacing:.8px}
.plan-name{font-size:13px;font-weight:800;font-family:var(--f-display);color:var(--t1);margin-bottom:4px}
.plan-price{font-size:28px;font-weight:800;font-family:var(--f-display);color:var(--brand);line-height:1.1}
.plan-price span{font-size:13px;font-weight:500;color:var(--t3)}
.plan-price.enterprise{font-size:18px;margin-top:6px}
.plan-period{font-size:10px;color:var(--t3);font-family:var(--f-mono);margin-bottom:14px}
.plan-features{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.pf-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t2)}
.pf-item i{font-size:14px;flex-shrink:0}
.pf-item.ok i{color:var(--ok)}.pf-item.na i{color:var(--t3)}.pf-item.na span{color:var(--t3);text-decoration:line-through}
.pf-item.gold i{color:var(--gold)}

/* ══ WIZARD ══════════════════════════════════════════════════════ */
.wizard-steps{display:flex;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--bg1);flex-shrink:0;overflow-x:auto;gap:0}
.ws{display:flex;align-items:center;gap:7px;flex-shrink:0}
.ws-circle{width:24px;height:24px;border-radius:50%;background:var(--bg3);color:var(--t3);font-size:11px;font-weight:700;font-family:var(--f-display);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.ws.active .ws-circle{background:var(--brand);color:#fff}.ws.done .ws-circle{background:var(--ok);color:#fff}
.ws-label{font-size:10.5px;font-weight:600;color:var(--t3);font-family:var(--f-body);white-space:nowrap}
.ws.active .ws-label{color:var(--brand)}.ws.done .ws-label{color:var(--ok)}
.ws-sep{width:20px;height:1px;background:var(--line2);flex-shrink:0;margin:0 3px}

/* ══ FILTER BAR ══════════════════════════════════════════════════ */
.fbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 20px;border-bottom:1px solid var(--line);background:var(--bg1);flex-shrink:0}
.fbar select,.fbar input{font-family:var(--f-body);font-size:12px;padding:5px 9px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--bg1);color:var(--t1)}

/* ══ MODAL ═══════════════════════════════════════════════════════ */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:100;display:none;align-items:center;justify-content:center}
.modal-bg.on{display:flex}
.modal{background:var(--bg1);border-radius:var(--r-xl);width:min(640px,95vw);max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--sh-md);overflow:hidden}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:15px;font-weight:700;font-family:var(--f-display);color:var(--t1)}
.modal-body{padding:20px 22px;overflow-y:auto;flex:1}
.modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}

/* ══ NORM GRID ═══════════════════════════════════════════════════ */
.norm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.norm-card{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;transition:box-shadow .15s}
.norm-card:hover{box-shadow:var(--sh)}
.norm-flag{font-size:22px;margin-bottom:6px}
.norm-country{font-size:13px;font-weight:700;font-family:var(--f-display);color:var(--t1)}
.norm-norma{font-size:10px;font-family:var(--f-mono);color:var(--brand);margin-top:2px}
.norm-params{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.norm-row{display:flex;justify-content:space-between;font-size:11px}
.norm-lbl{color:var(--t3)}.norm-val{font-family:var(--f-mono);font-weight:600;color:var(--t1)}

/* ══ RANK LIST ═══════════════════════════════════════════════════ */
.rank-list{display:flex;flex-direction:column;gap:5px}
.rank-item{display:flex;align-items:center;gap:9px;padding:7px 11px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm)}
.rank-n{font-size:11px;font-weight:700;font-family:var(--f-mono);color:var(--t3);width:18px;text-align:center}
.rank-info{flex:1}.rank-id{font-size:12.5px;font-weight:600;font-family:var(--f-display)}
.rank-det{font-size:10.5px;color:var(--t3);font-family:var(--f-mono)}

/* ══ CAT CARDS ═══════════════════════════════════════════════════ */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px}
.cat-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;cursor:pointer;transition:all .15s}
.cat-card:hover{background:var(--brand-dim);border-color:var(--brand);box-shadow:var(--sh)}
.cat-card.selected{background:var(--brand-dim);border-color:var(--brand)}
.cat-tipo{font-size:9.5px;font-family:var(--f-mono);color:var(--t3);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.cat-nombre{font-size:12.5px;font-weight:700;font-family:var(--f-display);color:var(--t1);margin-top:2px}
.cat-params{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.cat-row{display:flex;justify-content:space-between;font-size:11px}
.cat-lbl{color:var(--t3)}.cat-val{font-family:var(--f-mono);font-weight:600;color:var(--t1);font-size:10.5px}

/* ══ SCORE BAR ════════════════════════════════════════════════════ */
.score-bar{display:inline-block;width:50px;height:5px;background:var(--bg3);border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:4px}
.score-fill{height:100%;border-radius:3px}

/* ══ PAYWALL OVERLAY ══════════════════════════════════════════════ */
.paywall{position:absolute;inset:0;background:rgba(255,255,255,0.85);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:5;border-radius:inherit}
[data-theme="dark"] .paywall{background:rgba(20,27,38,0.88)}
.paywall-icon{font-size:36px;color:var(--gold)}
.paywall-title{font-size:15px;font-weight:700;font-family:var(--f-display);color:var(--t1)}
.paywall-sub{font-size:12px;color:var(--t3);text-align:center;max-width:280px}

/* ══ ONBOARDING OVERLAY ═══════════════════════════════════════════ */
.onb-bg{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.onb-card{background:var(--bg1);border-radius:24px;width:min(520px,94vw);padding:36px 40px;box-shadow:0 8px 48px rgba(0,0,0,0.25);display:flex;flex-direction:column;gap:20px;animation:onb-in .3s ease}
/* ══ USAGE COUNTER ════════════════════════════════════════════════ */
.usage-bar{background:var(--bg2);border-top:1px solid var(--line);padding:8px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.usage-label{font-size:10px;font-family:var(--f-mono);color:var(--t3)}
.usage-track{flex:1;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden}
.usage-fill{height:100%;border-radius:2px;transition:width .4s}
.usage-fill.safe{background:var(--ok)}
.usage-fill.warn{background:var(--accent)}
.usage-fill.over{background:var(--err)}
.usage-count{font-size:10px;font-family:var(--f-mono);font-weight:700;color:var(--t2)}

/* ══ UPGRADE GATE ═════════════════════════════════════════════════ */
.upgrade-gate{background:linear-gradient(135deg,var(--gold-dim),var(--brand-dim));border:1px solid rgba(200,134,10,0.25);border-radius:var(--r-lg);padding:20px;display:flex;gap:14px;align-items:flex-start}
.upgrade-gate i{font-size:24px;color:var(--gold);flex-shrink:0}
.upgrade-gate-title{font-size:13px;font-weight:700;font-family:var(--f-display);color:var(--t1);margin-bottom:4px}
.upgrade-gate-sub{font-size:11.5px;color:var(--t2);line-height:1.5}
.upgrade-gate-actions{display:flex;gap:8px;margin-top:10px}

/* ══ PLAN INDICATOR ═══════════════════════════════════════════════ */
.plan-indicator{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:10.5px;font-family:var(--f-mono);font-weight:700;cursor:pointer;transition:all .15s}
.plan-free{background:var(--indet-dim);color:var(--indet)}
.plan-pro{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(200,134,10,0.3)}
.plan-ent{background:var(--violet-dim);color:var(--violet);border:1px solid rgba(92,53,197,0.3)}

/* ══ DEMO BANNER ══════════════════════════════════════════════════ */
.demo-banner{position:fixed;top:52px;left:0;right:0;background:linear-gradient(90deg,var(--brand),var(--violet));padding:5px 16px;display:flex;align-items:center;gap:10px;justify-content:center;font-size:11px;color:rgba(255,255,255,0.9);font-family:var(--f-mono);z-index:9;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.demo-banner strong{color:#fff}
.demo-banner button{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);color:#fff;padding:2px 10px;border-radius:4px;font-size:10px;cursor:pointer;transition:all .15s;font-family:var(--f-mono)}
.demo-banner button:hover{background:rgba(255,255,255,0.35)}

/* ══ KPI CARDS ════════════════════════════════════════════════════ */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:4px}
.kpi-card{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.kpi-label{font-size:10px;font-family:var(--f-mono);color:var(--t3);text-transform:uppercase;letter-spacing:.8px}
.kpi-value{font-size:22px;font-weight:800;font-family:var(--f-display);color:var(--t1);margin-top:3px}
.kpi-sub{font-size:10.5px;color:var(--t3);margin-top:2px}
.kpi-trend{font-size:10px;font-family:var(--f-mono);margin-top:4px}
.kpi-ok{border-left:3px solid var(--ok)}.kpi-warn{border-left:3px solid var(--warn)}.kpi-err{border-left:3px solid var(--err)}.kpi-info{border-left:3px solid var(--brand)}

/* ══ AI MSG COUNTER ═══════════════════════════════════════════════ */
.ai-counter{font-size:10px;font-family:var(--f-mono);color:var(--t3);padding:5px 14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:6px;flex-shrink:0}
.ai-counter.warn{color:var(--warn)}
.ai-counter.over{color:var(--err)}