/* SIZWEB — Diagnóstico PRO (alineado a tools.css)
   Importante: NO pisa estilos globales.
*/
.diagPro{
  --d-border: var(--border);
  --d-card: var(--card);
  --d-muted: var(--muted);
  --d-r: var(--r);
  --d-shadow: var(--shadow);
}

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

.diagPro .diagChips{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
.diagPro .diagChip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid var(--d-border);background:#0f0f11;color:rgba(255,255,255,.86);font-weight:800;font-size:12px;}
.diagPro .diagCta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
.diagPro .diagFine{margin-top:14px;color: var(--d-muted);font-size:12px;line-height:1.6;}
.diagPro .diagFine b{color:#fff;}

/* preview */
.diagPro .diagPreview{border:1px solid var(--d-border);background: var(--d-card);border-radius: calc(var(--d-r) + 2px);box-shadow: var(--d-shadow);padding:14px;}
.diagPro .diagPreviewTop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.diagPro .diagPreviewLabel{color: var(--d-muted);font-weight:800;font-size:12px;}
.diagPro .diagPreviewValue{font-weight:900;font-size:44px;line-height:1;}
.diagPro .diagPreviewMeta{margin-top:6px;color: var(--d-muted);font-size:12px;line-height:1.6;}
.diagPro .diagMiniKpis{margin-top:12px;display:grid;grid-template-columns: repeat(2, 1fr);gap:10px;}
.diagPro .diagMiniKpi{border:1px solid var(--d-border);background:#0f0f11;border-radius:12px;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.diagPro .diagMiniKpi span:first-child{color: var(--d-muted);font-weight:800;font-size:12px;}
.diagPro .diagMiniKpi span:last-child{font-weight:900;}

/* layout */
.diagPro .diagLayout{display:grid;gap:14px;}
@media (min-width: 1100px){.diagPro .diagLayout{grid-template-columns: 420px 1fr;align-items:start;}}
.diagPro .diagPanel,.diagPro .diagResults,.diagPro .diagLite{border:1px solid var(--d-border);background: var(--d-card);border-radius: calc(var(--d-r) + 2px);box-shadow: var(--d-shadow);padding:14px;min-width:0;}
.diagPro .diagPanel--sticky{position: sticky; top: 64px;}

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

.diagPro .diagDivider{height:1px;background: rgba(255,255,255,.08);margin:14px 0;}
.diagPro .diagActions{display:grid;grid-template-columns: 1fr 1fr;gap:10px;margin-top:12px;}
.diagPro .diagFilters{display:grid;grid-template-columns: 140px 1fr;gap:10px;}
.diagPro .diagExports{display:grid;gap:10px;}
.diagPro .help{color: var(--d-muted);font-size:12px;line-height:1.6;margin-top:10px;}
.diagPro .row2{display:grid;grid-template-columns: 1fr 1fr;gap:10px;}
@media (max-width: 420px){.diagPro .row2{grid-template-columns: 1fr;} .diagPro .diagFilters{grid-template-columns:1fr;} .diagPro .diagActions{grid-template-columns:1fr;}}

/* summary */
.diagPro .diagSummary{padding:14px;border:1px solid var(--d-border);background:#0f0f11;border-radius: calc(var(--d-r) + 2px);margin-bottom:12px;}
.diagPro .diagSummaryTop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.diagPro .diagSummaryLabel{color: var(--d-muted);font-weight:800;font-size:12px;}
.diagPro .diagSummaryHint{margin-top:6px;color: var(--d-muted);font-size:12px;line-height:1.6;}
.diagPro .diagSummaryScore{display:flex;align-items:center;gap:10px;font-weight:900;}
.diagPro .diagSummaryScore #scoreValue{font-size:34px;line-height:1;}
.diagPro .diagBadge{border:1px solid var(--d-border);background: rgba(255,255,255,.06);border-radius:999px;padding:8px 12px;font-weight:900;}
.diagPro .diagPills{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
.diagPro .diagPills .pill{border:1px solid var(--d-border);background: rgba(255,255,255,.04);border-radius:999px;padding:8px 12px;font-weight:800;font-size:12px;color:rgba(255,255,255,.86);}

/* tabs */
.diagPro .diagTabs{display:flex;gap:10px;flex-wrap:wrap;margin: 12px 0;}
.diagPro .diagTabBtn{border:1px solid var(--d-border);background:#1b1b1d;color:#fff;padding:8px 12px;border-radius:999px;font-weight:800;cursor:pointer;}
.diagPro .diagTabBtn.isActive{background: var(--brand);border-color: transparent;}
.diagPro [data-tab-panel]{display:none;}
.diagPro [data-tab-panel].isActive{display:block;}
.diagPro .diagTab{animation: diagFade .18s ease;}
@keyframes diagFade{from{opacity:.6; transform: translateY(2px);}to{opacity:1; transform:none;}}

/* blocks */
.diagPro .diagBlockHead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.diagPro .diagIssues{display:grid;gap:10px;}
.diagPro .diagIssue{border:1px solid var(--d-border);background:#0f0f11;border-radius:14px;padding:12px;}
.diagPro .diagIssueTop{display:flex;justify-content:space-between;gap:10px;align-items:center;}
.diagPro .diagIssueTitle{font-weight:900;}
.diagPro .diagSev{border:1px solid var(--d-border);border-radius:999px;padding:6px 10px;font-weight:900;font-size:12px;}
.diagPro .diagSev.P1{border-color: rgba(227,6,19,.55); background: rgba(227,6,19,.16);}
.diagPro .diagSev.P2{border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06);}
.diagPro .diagSev.P3{border-color: rgba(255,255,255,.12); background: transparent;}
.diagPro .diagIssueDesc{margin-top:8px;color: rgba(255,255,255,.82);line-height:1.7;font-size:13px;}
.diagPro .diagFix{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;}

/* lite / kv / code / checks */
.diagPro .diagLite__title{font-weight:900;margin-bottom:10px;}
.diagPro .diagGrid2{display:grid;gap:12px;}
@media (min-width: 860px){.diagPro .diagGrid2{grid-template-columns: 1fr 1fr;}}
.diagPro .diagKv{display:grid;gap:10px;}
.diagPro .diagKvRow{border:1px solid var(--d-border);background:#0f0f11;border-radius:14px;padding:10px;display:grid;gap:8px;}
@media (min-width: 760px){.diagPro .diagKvRow{grid-template-columns: 190px 1fr; align-items:start;}}
.diagPro .diagKvKey{color: var(--d-muted); font-weight:900; font-size:12px;}
.diagPro .diagKvVal{color: rgba(255,255,255,.9); line-height:1.6; word-break:break-word;}

.diagPro .diagCode{border:1px solid var(--d-border);background:#0f0f11;border-radius:14px;padding:12px;overflow:auto;max-height: 420px;}
.diagPro .diagCode 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;}

.diagPro .diagList{margin:0;padding-left: 18px;color: rgba(255,255,255,.86);line-height:1.7;}
.diagPro .diagList li{margin: 6px 0;}
.diagPro .diagChecks{display:grid;gap:10px;}
.diagPro .check{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--d-border);background:#0f0f11;border-radius:14px;padding:10px;}
.diagPro .check__icon{width:26px;height:26px;border-radius:10px;display:grid;place-items:center;font-weight:900;border:1px solid rgba(255,255,255,.14);background: rgba(255,255,255,.06);}
.diagPro .check.ok .check__icon{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.12);}
.diagPro .check.warn .check__icon{border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12);}
.diagPro .check.bad .check__icon{border-color: rgba(227,6,19,.45); background: rgba(227,6,19,.12);}
.diagPro .check__title{font-weight:900;}
.diagPro .check__desc{color: rgba(255,255,255,.78); line-height:1.6; font-size:13px;}