/* ===========================================================================
   Dyncloud status page — Dynapps España
   Design system extracted from the approved mock (Public Sans, light/dark).
   Status colors are driven by a per-element --c / --c-bg / --c-fg set by the
   .st-* classes, so components stay generic.
   =========================================================================== */

:root {
  --bg:#f6f6f7; --page:#ffffff; --surface:#ffffff;
  --border:#ececee; --border-strong:#dcdce0;
  --fg:#18181b; --fg-soft:#3f3f46; --muted:#71717a; --faint:#a1a1aa;
  --track:#f1f1f3; --hover:#f4f4f5;
  --green:#12b76a; --green-fg:#067647; --green-bg:#ecfdf3; --green-bar:#1aba71;
  --amber:#f79009; --amber-fg:#b54708; --amber-bg:#fffaeb;
  --red:#f04438; --red-fg:#b42318; --red-bg:#fef3f2;
  --blue:#2e90fa; --blue-fg:#175cd3; --blue-bg:#eff8ff;
  --none:#e4e4e7;              /* bar segment with no data yet */
  --tip-bg:#1c1f24; --tip-fg:#f4f5f6;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.07);
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
}
[data-theme="dark"] {
  --bg:#08090b; --page:#0f1114; --surface:#14171b;
  --border:#22262c; --border-strong:#2f343c;
  --fg:#f3f4f6; --fg-soft:#cfd2d8; --muted:#8b909a; --faint:#5b616b;
  --track:#1a1e23; --hover:#1a1e23;
  --green:#3ccb7f; --green-fg:#5fd99e; --green-bg:#0e2a1d; --green-bar:#2eb073;
  --amber:#fdb022; --amber-fg:#fdb022; --amber-bg:#2a2011;
  --red:#f97066; --red-fg:#f97066; --red-bg:#2a1513;
  --blue:#53b1fd; --blue-fg:#84caff; --blue-bg:#0e2138;
  --none:#24282e;
  --tip-bg:#e9eaec; --tip-fg:#0f1114;
  --shadow:0 1px 3px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}

/* status-color contexts */
.st-operational { --c:var(--green); --c-bg:var(--green-bg); --c-fg:var(--green-fg); --c-bar:var(--green-bar); }
.st-degraded    { --c:var(--amber); --c-bg:var(--amber-bg); --c-fg:var(--amber-fg); --c-bar:var(--amber); }
.st-outage      { --c:var(--red);   --c-bg:var(--red-bg);   --c-fg:var(--red-fg);   --c-bar:var(--red); }
.st-scheduled,
.st-info        { --c:var(--blue);  --c-bg:var(--blue-bg);  --c-fg:var(--blue-fg);  --c-bar:var(--blue); }
.st-none        { --c:var(--faint); --c-bg:var(--track);    --c-fg:var(--muted);    --c-bar:var(--none); }

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  min-height:100vh; background:var(--bg); color:var(--fg);
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--green); color:#fff; }
a { color:inherit; }
button { font-family:inherit; }

/* ---- header ---- */
.hdr { border-bottom:1px solid var(--border); background:var(--page); position:sticky; top:0; z-index:30; }
.hdr-inner { max-width:900px; margin:0 auto; padding:15px 24px; display:flex; align-items:center; gap:18px; }
.brand { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; color:var(--fg); }
.brand .logo { height:23px; width:auto; display:block; }
.nav { display:flex; gap:4px; margin-left:6px; }
.nav-btn { padding:7px 13px; border-radius:9px; font-size:14.5px; font-weight:600; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--muted); }
.nav-btn.active { background:var(--track); color:var(--fg); }
.spacer { flex:1; }
.lang { display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.lang-btn { padding:7px 11px; border:none; cursor:pointer; font-size:13px; font-weight:700; background:var(--page); color:var(--muted); }
.lang-btn.active { background:var(--track); color:var(--fg); }
.theme-btn { width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--page); color:var(--fg-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.support-btn { padding:8px 15px; border-radius:9px; border:1px solid var(--border-strong); background:var(--page); color:var(--fg); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; }

/* ---- main containers ---- */
.main { max-width:900px; margin:0 auto; padding:44px 24px 20px; }
.main-narrow { max-width:760px; margin:0 auto; padding:44px 24px 20px; }

/* ---- banner ---- */
.banner { display:flex; align-items:flex-start; gap:13px; border:1px solid var(--c); background:var(--c-bg); border-radius:12px; padding:15px 17px; margin-bottom:30px; cursor:pointer; }
.banner-dot { width:11px; height:11px; border-radius:50%; background:var(--c); margin-top:5px; flex:none; box-shadow:0 0 0 4px var(--c-bg); }
.banner-body { flex:1; min-width:0; }
.banner-top { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:3px; }
.banner-tag { font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-fg); }
.banner-when { color:var(--muted); font-size:12.5px; }
.banner-title { font-weight:600; font-size:15.5px; color:var(--fg); }
.banner-msg { color:var(--muted); font-size:14px; margin-top:2px; line-height:1.5; }
.banner-cta { color:var(--c-fg); font-size:13px; font-weight:600; white-space:nowrap; align-self:center; }

/* ---- hero ---- */
.hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:15px; padding:12px 0 6px; }
.hero-icon { width:58px; height:58px; border-radius:50%; background:var(--c); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 7px var(--c-bg); }
.hero-title { margin:0; font-size:34px; font-weight:800; letter-spacing:-.025em; line-height:1.15; }
.hero-sub { color:var(--muted); font-size:15px; }

/* ---- range toggle ---- */
.range-wrap { display:flex; justify-content:flex-end; margin:34px 0 12px; }
.range { display:inline-flex; background:var(--track); border-radius:10px; padding:3px; gap:2px; }
.range-btn { padding:6px 15px; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer; border:none; background:transparent; color:var(--muted); }
.range-btn.active { background:var(--page); color:var(--fg); box-shadow:var(--shadow-sm); }

/* ---- services card ---- */
.card { border:1px solid var(--border); border-radius:15px; background:var(--page); box-shadow:var(--shadow); overflow:hidden; }
.group + .group > .group-sep { display:block; }
.group-sep { height:1px; background:var(--border); }
.group-hdr { display:flex; align-items:center; justify-content:space-between; padding:19px 24px; cursor:pointer; user-select:none; }
.group-name { font-weight:600; font-size:16px; color:var(--fg); }
.group-right { display:flex; align-items:center; gap:13px; }
.pill { display:inline-flex; align-items:center; gap:7px; background:var(--c-bg); color:var(--c-fg); font-weight:600; font-size:13.5px; padding:5px 12px; border-radius:20px; }
.pill-dot { width:9px; height:9px; border-radius:50%; background:var(--c); }
.chev { transition:transform .2s; color:var(--faint); }
.group.collapsed .chev { transform:rotate(0deg); }
.group .chev { transform:rotate(180deg); }
.group.collapsed .group-body { display:none; }

.group-body { padding:0 24px 6px; }
.ep { padding:15px 0 19px; border-top:1px solid var(--border); }
.ep-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; gap:12px; }
.ep-left { display:flex; align-items:center; gap:9px; min-width:0; }
.ep-dot { width:16px; height:16px; border-radius:50%; background:var(--c); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.ep-name { font-weight:500; font-size:15px; color:var(--fg); }
.ep-uptime { color:var(--c-fg); font-weight:600; font-size:13.5px; white-space:nowrap; }
.bars { display:flex; gap:2px; height:36px; align-items:stretch; }
.bar { flex:1 1 0; min-width:0; border-radius:2px; background:var(--c-bar); cursor:pointer; }
.bar.st-none { cursor:default; }
.bar-labels { display:flex; justify-content:space-between; margin-top:9px; color:var(--faint); font-size:12.5px; }

/* ---- incidents / maintenance ---- */
.page-title { margin:0 0 6px; font-size:28px; font-weight:800; letter-spacing:-.02em; }
.page-sub { margin:0 0 26px; color:var(--muted); font-size:15px; }
.note { display:flex; align-items:center; gap:10px; background:var(--green-bg); border:1px solid var(--green); border-radius:11px; padding:12px 15px; margin-bottom:32px; }
.note-dot { width:10px; height:10px; border-radius:50%; background:var(--green); flex:none; }
.note-txt { font-weight:600; font-size:14.5px; color:var(--green-fg); }
.section-label { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.event-list { display:flex; flex-direction:column; gap:14px; }
.event-card { border:1px solid var(--border); border-radius:12px; padding:16px 18px; background:var(--page); box-shadow:var(--shadow-sm); cursor:pointer; }
.event-card.upcoming { border-color:var(--blue); background:var(--blue-bg); }
.event-top { display:flex; align-items:center; gap:10px; margin-bottom:7px; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; gap:6px; background:var(--c-bg); color:var(--c-fg); font-weight:600; font-size:12.5px; padding:3px 10px; border-radius:20px; }
.badge-dot { width:7px; height:7px; border-radius:50%; background:var(--c); }
.event-when { color:var(--faint); font-size:12.5px; }
.event-title { font-weight:700; font-size:16px; color:var(--fg); margin-bottom:5px; }
.event-summary { color:var(--muted); font-size:14px; line-height:1.5; }
.event-affected { color:var(--faint); font-size:12.5px; margin-top:9px; }
.month { margin-bottom:30px; }
.empty { color:var(--muted); font-size:14.5px; padding:4px 0 34px; }

/* ---- detail ---- */
.back-btn { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--muted); font-size:14px; font-weight:600; cursor:pointer; padding:0; margin-bottom:20px; }
.detail-kind { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.detail-title { margin:0 0 8px; font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.detail-when { color:var(--muted); font-size:14.5px; margin-bottom:18px; }
.detail-affected { display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:14px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:26px; }
.detail-affected .lbl { font-size:13px; color:var(--muted); font-weight:600; margin-right:4px; }
.chip { font-size:13px; font-weight:500; color:var(--fg-soft); background:var(--track); border-radius:7px; padding:4px 10px; }
.timeline { padding-left:2px; }
.tl-row { display:flex; gap:14px; }
.tl-rail { display:flex; flex-direction:column; align-items:center; padding-top:3px; }
.tl-dot { width:12px; height:12px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px var(--page); flex:none; }
.tl-line { width:2px; flex:1; background:var(--border); margin:2px 0; min-height:26px; }
.tl-body { padding-bottom:26px; flex:1; }
.tl-head { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.tl-status { font-weight:700; font-size:14.5px; color:var(--c); }
.tl-time { color:var(--faint); font-size:12.5px; }
.tl-text { color:var(--fg-soft); font-size:14.5px; line-height:1.55; }

/* ---- footer ---- */
.footer { border-top:1px solid var(--border); margin-top:60px; background:var(--page); }
.footer-inner { max-width:900px; margin:0 auto; padding:26px 24px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.footer-desc { color:var(--muted); font-size:13px; max-width:520px; line-height:1.5; }
.footer-links { display:flex; gap:18px; }
.footer-links a { color:var(--fg-soft); font-size:13.5px; font-weight:600; text-decoration:none; }
.footer-powered { text-align:center; color:var(--faint); font-size:12px; padding:0 24px 22px; font-family:'JetBrains Mono',monospace; }

/* ---- tooltip ---- */
.tip { position:fixed; z-index:60; transform:translate(-50%,calc(-100% - 11px)); background:var(--tip-bg); color:var(--tip-fg); padding:9px 12px; border-radius:9px; box-shadow:0 6px 24px rgba(0,0,0,.25); pointer-events:none; white-space:nowrap; }
.tip-title { font-weight:700; font-size:12.5px; margin-bottom:4px; }
.tip-body { display:flex; align-items:center; gap:7px; font-size:12px; opacity:.85; }
.tip-body .d { width:8px; height:8px; border-radius:50%; background:var(--c); }

@media (max-width:640px) {
  .hdr-inner { flex-wrap:wrap; gap:10px; }
  .nav { order:3; width:100%; margin-left:0; }
  .hero-title { font-size:27px; }
  .main, .main-narrow { padding-top:30px; }
}