/* SIZWEB — SEO Validator ULTRA PRO (Theme-aligned addon)
   ✔ Usa variables y look & feel de tools.css
   ✔ Evita sobreescribir clases globales (.btn, .field, .label, .input)
   ✔ Todo se "scopea" con .seoUltra para no romper otras herramientas
*/
.seoUltra{
  --seo-border: var(--border);
  --seo-card: var(--card);
  --seo-bg: var(--bg);
  --seo-muted: var(--muted);
  --seo-radius: var(--r);
  --seo-shadow: var(--shadow);
}
.seoUltra .main{ padding: 26px 0 34px; }

/* HERO */
.seoUltra .seoHero{display:grid;gap:16px;margin: 0 0 18px;}
@media (min-width: 980px){.seoUltra .seoHero{grid-template-columns: 1.25fr .75fr;align-items:end;}}
.seoUltra .seoHero h1{margin:0;font-size: clamp(26px, 5.2vw, 52px);letter-spacing:-.8px;font-weight: 900;}
.seoUltra .seoHero p{margin:10px 0 0;color: var(--seo-muted);line-height:1.7;font-weight:600;max-width: 85ch;}
.seoUltra .seoPro{color: var(--brand);}

.seoUltra .seoChips{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
.seoUltra .seoChip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid var(--seo-border);background:#0f0f11;color:rgba(255,255,255,.86);font-weight:800;font-size:12px;}

.seoUltra .seoCta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
.seoUltra .seoFine{margin-top:14px;color: var(--seo-muted);font-size:12px;line-height:1.6;}
.seoUltra .seoFine b{color:#fff;}

/* Preview */
.seoUltra .seoPreview{border:1px solid var(--seo-border);background: var(--seo-card);border-radius: calc(var(--seo-radius) + 2px);box-shadow: var(--seo-shadow);padding:14px;}
.seoUltra .seoPreviewTop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.seoUltra .seoPreviewLabel{color: var(--seo-muted);font-weight:800;font-size:12px;}
.seoUltra .seoPreviewValue{font-weight:900;font-size:44px;line-height:1;}
.seoUltra .seoBar{height:10px;border-radius:999px;border:1px solid var(--seo-border);overflow:hidden;background:#0f0f11;margin-top:10px;}
.seoUltra .seoBarFill{height:100%;width:0%;background: var(--brand);transition: width .5s ease;}
.seoUltra .seoPreviewMeta{margin-top:10px;color: var(--seo-muted);font-size:12px;line-height:1.6;}
.seoUltra .seoMiniKpis{margin-top:12px;display:grid;grid-template-columns: repeat(2, 1fr);gap:10px;}
.seoUltra .seoMiniKpi{border:1px solid var(--seo-border);background:#0f0f11;border-radius:12px;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.seoUltra .seoMiniKpi span:first-child{color: var(--seo-muted);font-weight:800;font-size:12px;}
.seoUltra .seoMiniKpi span:last-child{font-weight:900;}

/* Layout */
.seoUltra .seoLayout{display:grid;gap:14px;}
@media (min-width: 1100px){.seoUltra .seoLayout{grid-template-columns: 420px 1fr;align-items:start;}}

.seoUltra .seoPanel,.seoUltra .seoResults,.seoUltra .seoLite{
  border:1px solid var(--seo-border);
  background: var(--seo-card);
  border-radius: calc(var(--seo-radius) + 2px);
  box-shadow: var(--seo-shadow);
  padding:14px;
  min-width:0;
}
.seoUltra .seoPanel--sticky{position: sticky; top: 64px;}

.seoUltra .seoSeg{display:flex;gap:10px;flex-wrap:wrap;}
.seoUltra .seoSegBtn{border:1px solid var(--seo-border);background:#1b1b1d;color:#fff;padding:8px 12px;border-radius:999px;font-weight:800;cursor:pointer;}
.seoUltra .seoSegBtn.isActive{background: var(--brand);border-color: transparent;}

.seoUltra .seoTabs{display:flex;gap:10px;flex-wrap:wrap;}
.seoUltra .seoTabBtn{border:1px solid var(--seo-border);background:#1b1b1d;color:#fff;padding:8px 12px;border-radius:999px;font-weight:800;cursor:pointer;}
.seoUltra .seoTabBtn.isActive{background: var(--brand);border-color: transparent;}

.seoUltra .seoSummaryTop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.seoUltra .seoBadge{border:1px solid var(--seo-border);background:#0f0f11;border-radius:999px;padding:8px 12px;font-weight:900;}

.seoUltra .seoPills{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
.seoUltra .seoPill{border:1px solid var(--seo-border);background:#0f0f11;border-radius:999px;padding:8px 12px;font-weight:800;font-size:12px;color:rgba(255,255,255,.86);}

.seoUltra .seoIssues{display:grid;gap:10px;}
.seoUltra .seoIssue{border:1px solid var(--seo-border);background:#0f0f11;border-radius:14px;padding:12px;}
.seoUltra .seoIssueTop{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.seoUltra .seoIssueTitle{font-weight:900;}
.seoUltra .seoSev{border:1px solid var(--seo-border);border-radius:999px;padding:6px 10px;font-weight:900;font-size:12px;}
.seoUltra .seoSev.P1{border-color: rgba(227,6,19,.55); background: rgba(227,6,19,.16);}
.seoUltra .seoSev.P2{border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06);}
.seoUltra .seoSev.P3{border-color: rgba(255,255,255,.12); background: transparent;}
.seoUltra .seoIssueDesc{margin-top:8px;color: rgba(255,255,255,.82);line-height:1.7;font-size:13px;}
.seoUltra .seoFix{margin-top:10px;border:1px solid rgba(227,6,19,.40);background: rgba(227,6,19,.14);border-radius:12px;padding:10px;line-height:1.7;font-size:13px;white-space: pre-wrap;}

.seoUltra .seoKv{display:grid;gap:10px;}
.seoUltra .seoKvRow{border:1px solid var(--seo-border);background:#0f0f11;border-radius:14px;padding:10px;display:grid;gap:8px;}
@media (min-width: 760px){.seoUltra .seoKvRow{grid-template-columns: 190px 1fr; align-items:start;}}
.seoUltra .seoKvKey{color: var(--seo-muted); font-weight:900; font-size:12px;}
.seoUltra .seoKvVal{color: rgba(255,255,255,.9); line-height:1.6; word-break:break-word;}

.seoUltra .seoCode{border:1px solid var(--seo-border);background:#0f0f11;border-radius:14px;padding:12px;overflow:auto;max-height: 380px;}
.seoUltra .seoCode pre{margin:0;font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;font-size:12px;line-height:1.6;white-space: pre-wrap;}

.seoUltra [hidden]{ display:none !important; }
@media (prefers-reduced-motion: reduce){.seoUltra .seoBarFill{transition:none;}}


/* Tabs: oculta paneles no activos (JS aplica .isActive) */
.seoUltra [data-tab-panel]{display:none;}
.seoUltra [data-tab-panel].isActive{display:block;}

/* Si por alguna razón vienen visibles, suaviza transición */
.seoUltra [data-tab-panel]{animation: seoFade .18s ease;}
@keyframes seoFade{from{opacity:.6; transform: translateY(2px);}to{opacity:1; transform:none;}}