.kit-st-page { background:var(--bg-card-2); min-height:0; color:var(--text-1);  }
.kit-st-page * { box-sizing:border-box; }
.kit-st-wrap { max-width:1180px; margin:0 auto; padding:0 16px; }
.kit-st-hero { background:linear-gradient(180deg,#1F0046 0%, #2A0B61 100%); color:#fff; padding:36px 16px 56px; }
.kit-st-hero-inner { max-width:1180px; margin:0 auto; }
.kit-st-hero .eyebrow { display:inline-block; background:rgba(123,47,190,.25); color:#E6D5FF; padding:5px 12px; border-radius:999px; font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.kit-st-hero h1 { font-size:clamp(1.55rem,6vw,2.6rem); font-weight:800; line-height:1.15; margin:6px 0 12px; letter-spacing:-.02em; overflow-wrap:break-word; }
.kit-st-hero h1 .accent { background:linear-gradient(90deg,#27E19D,#6BFFB0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kit-st-hero p { font-size:.96rem; color:rgba(255,255,255,.82); max-width:680px; line-height:1.55; margin:0; }

.kit-st-summary { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.kit-st-summary-item { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:8px 14px; display:flex; align-items:center; gap:8px; font-size:.86rem; color:rgba(255,255,255,.9); }
.kit-st-summary-dot { width:9px; height:9px; border-radius:50%; }
.kit-st-summary-dot.ok        { background:#27E19D; box-shadow:0 0 8px rgba(39,225,157,.6); }
.kit-st-summary-dot.degraded  { background:#FFCB47; }
.kit-st-summary-dot.down      { background:#F4475E; }
.kit-st-summary-dot.unknown   { background:#A995C4; }

/* Grid de servicios */
.kit-st-grid-wrap { margin-top:0; padding-bottom:50px; }
.kit-st-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.kit-st-card { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:16px; text-decoration:none; color:inherit; display:block; position:relative; transition:transform .15s, border-color .15s, box-shadow .15s; }
.kit-st-card:hover { transform:none; border-color:#7B2FBE; box-shadow:0 10px 26px -10px rgba(123,47,190,.2); }
.kit-st-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; }
.kit-st-card-name { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.kit-st-card-logo { width:44px; height:44px; border-radius:11px; background:var(--bg-card-2); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; padding:6px; position:relative; box-shadow:inset 0 0 0 1px rgba(123,47,190,0.08); }
.kit-st-card-logo img { width:100%; height:100%; object-fit:contain; display:block; }
.kit-st-card-logo-fallback { font-size:1.5rem; line-height:1; }
.kit-st-card-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; position:absolute; right:-3px; bottom:-3px; border:2px solid #fff; }
.kit-st-card-dot.ok        { background:#27E19D; box-shadow:0 0 0 4px rgba(39,225,157,.22); animation:pulse 2.2s ease-in-out infinite; }
.kit-st-card-dot.degraded  { background:#FFCB47; box-shadow:0 0 0 4px rgba(255,203,71,.22); }
.kit-st-card-dot.down      { background:#F4475E; box-shadow:0 0 0 4px rgba(244,71,94,.22); animation:pulse-down 1.4s ease-in-out infinite; }
.kit-st-card-dot.unknown   { background:#A995C4; box-shadow:0 0 0 4px rgba(169,149,196,.22); }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 4px rgba(39,225,157,.22);} 50% { box-shadow:0 0 0 7px rgba(39,225,157,.12);} }
@keyframes pulse-down { 0%,100% { box-shadow:0 0 0 4px rgba(244,71,94,.22);} 50% { box-shadow:0 0 0 8px rgba(244,71,94,.05);} }
.kit-st-card-title { font-weight:700; font-size:.98rem; color:var(--text-1); }

/* Mini-sparkline 24h en cada card: 24 columnas (1h cada una), última = hora actual. */
.kit-st-spark { display:flex; align-items:flex-end; gap:1px; height:18px; margin-top:8px; }
.kit-st-spark-bar { flex:1; min-width:2px; background:#EDE5F8; border-radius:1px; min-height:3px; }
.kit-st-spark-bar.ok       { background:#27E19D; }
.kit-st-spark-bar.degraded { background:#FFCB47; }
.kit-st-spark-bar.down     { background:#F4475E; }
.kit-st-spark-bar.unknown  { background:#A995C4; }
.kit-st-spark-bar.empty    { background:#F0EAF8; min-height:2px; opacity:.4; }
.kit-st-card-arrow { color:var(--accent-text, #7B2FBE); opacity:0; transition:opacity .15s; }
.kit-st-card:hover .kit-st-card-arrow { opacity:1; }
.kit-st-card-status { font-size:.92rem; font-weight:700; padding:4px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; }
.kit-st-card-status.ok        { background:var(--teal-dim); color:var(--teal); }
.kit-st-card-status.degraded  { background:var(--warn-dim); color:var(--warn); }
.kit-st-card-status.down      { background:var(--error-dim); color:var(--error); }
.kit-st-card-status.unknown   { background:var(--bg-card-2); color:var(--text-2); }
.kit-st-card-meta { margin-top:10px; font-size:.78rem; color:var(--text-3); }
.kit-st-card-blurb { font-size:.84rem; color:var(--text-2); line-height:1.45; margin:6px 0 0; }

/* Detalle */
.kit-st-detail-head { display:flex; align-items:center; gap:14px; padding-bottom:14px; flex-wrap:wrap; }
.kit-st-detail-head h2 { font-size:1.55rem; font-weight:800; margin:0; color:var(--text-1); }
.kit-st-detail-head .kit-st-card-status { font-size:1rem; padding:6px 16px; }
.kit-st-detail-blurb { font-size:.95rem; color:var(--text-2); line-height:1.55; margin:0 0 18px; }

.kit-st-detail-history { margin-bottom:22px; }
.kit-st-panel { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:22px; }
.kit-st-panel h2 { font-size:.95rem; font-weight:700; margin:0 0 14px; color:var(--text-1); }

.kit-st-timeline { list-style:none; padding:0; margin:0; max-height:300px; overflow:auto; }
.kit-st-timeline li { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid #F0EAF8; font-size:.86rem; }
.kit-st-timeline li:last-child { border-bottom:none; }
.kit-st-timeline-dot { width:8px; height:8px; border-radius:50%; margin-top:7px; flex-shrink:0; }
.kit-st-timeline-meta { color:var(--text-3); font-size:.74rem; font-variant-numeric:tabular-nums; }


.kit-st-faq details { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:14px 18px; margin-bottom:8px; }
.kit-st-faq summary { font-weight:600; color:var(--text-1); cursor:pointer; outline:none; font-size:.93rem; }
.kit-st-faq p { margin:8px 0 0; color:var(--text-2); font-size:.9rem; line-height:1.5; }

.kit-st-others-title { font-size:1.02rem; font-weight:700; margin:24px 0 12px; color:var(--text-1); }
.kit-st-others-row { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
.kit-st-others-pill { display:inline-flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border); border-radius:999px; padding:8px 14px; font-size:.86rem; color:var(--text-2); text-decoration:none; font-weight:600; flex-shrink:0; transition:border-color .12s; white-space:nowrap; }
.kit-st-others-pill:hover { border-color:#7B2FBE; color:var(--accent-text, #7B2FBE); }
.kit-st-others-pill .kit-st-card-dot { width:8px; height:8px; box-shadow:none; animation:none; }

@media (max-width:480px) {
  .kit-st-hero { padding:28px 16px 50px; }
  .kit-st-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .kit-st-card { padding:14px; }
  .kit-st-card-title { font-size:.92rem; }
  .kit-st-card-status { font-size:.74rem; padding:3px 8px; }
  .kit-st-card-blurb { font-size:.78rem; }
  .kit-st-detail-head h2 { font-size:1.25rem; }
}
@media (max-width:360px) {
  .kit-st-grid { grid-template-columns:1fr; }
}

.kit-tool-workspace .kit-st-hero { padding:24px 16px; }
.kit-tool-workspace .kit-st-hero h1 { font-size:2rem; font-weight:700; }
.kit-tool-workspace .kit-st-hero p { color:var(--text-2); }
.kit-st-summary { list-style:none; padding:0; margin:20px 0 0; }
.kit-st-summary-item { color:var(--text-2); background:var(--bg-card); border-color:var(--border); }
.kit-st-refresh { display:inline-flex; align-items:center; min-height:44px; margin:16px 10px 0 0; padding:8px 14px; background:var(--accent-solid); color:#fff; border-radius:8px; font-size:.85rem; font-weight:600; }
.kit-st-refresh:focus-visible,.kit-st-faq summary:focus-visible,.kit-st-timeline:focus-visible { outline:2px solid var(--accent-text); outline-offset:3px; }
.kit-st-card-arrow { opacity:1; }
.kit-st-card-status { max-width:100%; }
.kit-st-timeline-dot.kit-st-card-dot,.kit-st-others-pill .kit-st-card-dot { position:static; }
.kit-st-others-row { flex-wrap:wrap; overflow:visible; }
.kit-st-others-pill,.kit-st-faq summary { min-height:44px; }
@media(max-width:640px) { .kit-tool-workspace .kit-st-hero h1 { font-size:1.5rem; } .kit-st-panel { padding:16px; } }
@media(prefers-reduced-motion:reduce) { .kit-st-card-dot { animation:none !important; } }