/* ============================================================
   ISTC TIME · Sistema de diseño
   Azul + verde + blanco. Modo claro y oscuro.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --ground:#EAEFF6;
  --surface:#FFFFFF;
  --surface-2:#F3F7FC;
  --ink:#132133;
  --ink-soft:#54637A;
  --ink-faint:#8A97AA;
  --border:#DCE4EE;
  --border-soft:#E9EEF5;

  --blue:#1257D6;
  --blue-deep:#0A3A9E;
  --blue-tint:#E6EFFD;
  --green:#0FA254;
  --green-deep:#0B7C40;
  --green-tint:#E1F4EA;
  --grad:linear-gradient(135deg,#1257D6 0%,#12A66A 100%);

  --warn:#B0730C;
  --warn-tint:#F7EDDA;
  --crit:#D23B3B;
  --crit-tint:#FBE7E7;

  --sidebar:#0B2E6E;
  --sidebar-ink:#C6D6F5;
  --sidebar-ink-dim:#8AA6DC;

  --shadow-sm:0 1px 2px rgba(19,33,51,.06);
  --shadow-md:0 2px 8px rgba(19,33,51,.06), 0 12px 28px rgba(19,33,51,.07);
  --radius:13px;
  --radius-sm:9px;

  --font-body:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display:"Sora", var(--font-body);
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0D131C;
    --surface:#161F2C;
    --surface-2:#1C2736;
    --ink:#E7ECF3;
    --ink-soft:#9EACBE;
    --ink-faint:#647284;
    --border:#293544;
    --border-soft:#212C3A;
    --blue:#4E8BF1;
    --blue-deep:#3F79DC;
    --blue-tint:#16263F;
    --green:#33BF7B;
    --green-deep:#2AA96C;
    --green-tint:#123020;
    --grad:linear-gradient(135deg,#3F79DC 0%,#1E9E68 100%);
    --warn:#D69A45;
    --warn-tint:#2B2213;
    --crit:#E67E7E;
    --crit-tint:#2E1A1A;
    --sidebar:#0B1A33;
    --sidebar-ink:#AFC4EC;
    --sidebar-ink-dim:#6E86B4;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 2px 8px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"] {
  --ground:#0D131C;
  --surface:#161F2C;
  --surface-2:#1C2736;
  --ink:#E7ECF3;
  --ink-soft:#9EACBE;
  --ink-faint:#647284;
  --border:#293544;
  --border-soft:#212C3A;
  --blue:#4E8BF1;
  --blue-deep:#3F79DC;
  --blue-tint:#16263F;
  --green:#33BF7B;
  --green-deep:#2AA96C;
  --green-tint:#123020;
  --grad:linear-gradient(135deg,#3F79DC 0%,#1E9E68 100%);
  --warn:#D69A45;
  --warn-tint:#2B2213;
  --crit:#E67E7E;
  --crit-tint:#2E1A1A;
  --sidebar:#0B1A33;
  --sidebar-ink:#AFC4EC;
  --sidebar-ink-dim:#6E86B4;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 2px 8px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.4);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:var(--font-display); margin:0; letter-spacing:-.01em; text-wrap:balance; }
a { color:var(--blue); text-underline-offset:2px; }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---------- shell ---------- */
.app { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
@media (max-width:900px){ .app { grid-template-columns:1fr; } }

.side {
  background:var(--sidebar); color:var(--sidebar-ink);
  padding:22px 16px; display:flex; flex-direction:column; gap:24px;
}
@media (max-width:900px){
  .side { flex-direction:row; align-items:center; gap:14px; padding:12px 16px; overflow-x:auto; }
  .side .plan-card { display:none; }
  .side .nav { flex-direction:row; }
  .side .nav-label { display:none; }
  .nav-group > summary { display:none; }
  .nav-group { display:flex; }
  .nav-group .nav-sub { flex-direction:row; margin:0; padding:0; border:0; }
}

.brand { display:flex; align-items:center; gap:11px; padding:0 6px; }
.brand .mark {
  width:34px; height:34px; border-radius:9px; background:var(--grad);
  display:grid; place-items:center; color:#fff; font-family:var(--font-display);
  font-weight:700; font-size:15px; box-shadow:0 4px 12px rgba(18,87,214,.4); flex:none;
}
.brand .name { font-family:var(--font-display); font-weight:600; font-size:16px; color:#fff; letter-spacing:-.02em; white-space:nowrap; }
.brand .name span { color:var(--sidebar-ink-dim); font-weight:500; }

.nav { display:flex; flex-direction:column; gap:2px; }
.nav a {
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px;
  color:var(--sidebar-ink); text-decoration:none; font-size:14px; font-weight:500;
  white-space:nowrap; transition:background .14s, color .14s;
}
.nav a svg { width:18px; height:18px; flex:none; opacity:.85; }
.nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav a.active { background:rgba(255,255,255,.13); color:#fff; }
.nav a.active svg { opacity:1; }
.navbadges { margin-left:auto; display:flex; gap:4px; }
.nb {
  min-width:18px; height:18px; padding:0 5px; border-radius:99px;
  font-size:11px; font-weight:700; line-height:18px; text-align:center;
  font-variant-numeric:tabular-nums; color:#1b1300;
}
.nb-warn { background:#F5C542; }
.nb-crit { background:#E5484D; color:#fff; }
.nb-tag { background:rgba(255,255,255,.14); color:var(--sidebar-ink); font-size:10px; font-weight:600; min-width:0; padding:0 7px; letter-spacing:.02em; }
.nav-group > summary {
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; cursor:pointer;
  color:var(--sidebar-ink); font-size:14px; font-weight:500; white-space:nowrap; list-style:none;
  transition:background .14s, color .14s; user-select:none;
}
.nav-group > summary::-webkit-details-marker { display:none; }
.nav-group > summary:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-group > summary svg { width:18px; height:18px; flex:none; opacity:.85; }
.nav-group > summary .navbadges { margin-left:auto; }
.nav-group > summary .chev { width:14px; height:14px; margin-left:auto; opacity:.55; transition:transform .15s; }
.nav-group > summary .navbadges + .chev { margin-left:6px; }
.nav-group[open] > summary { color:#fff; }
.nav-group[open] > summary .chev { transform:rotate(90deg); }
.nav-group[open] > summary .navbadges { display:none; }
.nav-group[open] > summary .navbadges ~ .chev { margin-left:auto; }
.nav-sub { display:flex; flex-direction:column; gap:1px; margin:1px 0 4px 20px; padding-left:11px; border-left:1px solid rgba(255,255,255,.12); }
.nav-sub a { padding:6px 10px; font-size:13px; }
.nav-label {
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--sidebar-ink-dim); padding:0 11px; margin:14px 0 6px;
}

.plan-card {
  margin-top:auto; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09); border-radius:11px; padding:13px; font-size:13px;
}
.plan-card .t { color:#fff; font-weight:600; font-family:var(--font-display); font-size:13px; }
.plan-card .bar { height:6px; border-radius:99px; background:rgba(255,255,255,.14); margin:9px 0 6px; overflow:hidden; }
.plan-card .bar i { display:block; height:100%; background:var(--grad); border-radius:99px; }
.plan-card .m { color:var(--sidebar-ink-dim); font-size:12px; }

/* ---------- main ---------- */
.main { display:flex; flex-direction:column; min-width:0; }

.topbar {
  display:flex; align-items:center; gap:16px; padding:14px 26px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.topbar .spacer { flex:1; }
.top-date { font-size:13px; color:var(--ink-soft); }
@media (max-width:620px){ .top-date { display:none; } }

.tenant {
  display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px;
  border-radius:9px; border:1px solid var(--border); background:var(--surface-2);
  cursor:pointer; font-weight:600; font-size:13.5px; color:var(--ink);
}
.tenant .logo {
  width:26px; height:26px; border-radius:7px; background:var(--blue-tint); color:var(--blue);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:12px;
}
.tenant svg { width:15px; height:15px; color:var(--ink-faint); }

.icon-btn {
  width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface-2); display:grid; place-items:center; cursor:pointer; color:var(--ink-soft);
}
.icon-btn svg { width:17px; height:17px; }
.avatar {
  width:34px; height:34px; border-radius:9px; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:13px;
}
.user-menu { display:flex; align-items:center; gap:9px; }
.user-menu .who { text-align:right; line-height:1.2; }
.user-menu .who .n { font-size:13px; font-weight:600; }
.user-menu .who .r { font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
@media (max-width:620px){ .user-menu .who { display:none; } }

.content { padding:26px; display:flex; flex-direction:column; gap:22px; max-width:1280px; width:100%; }
@media (max-width:560px){ .content { padding:18px; } }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-head h1 { font-size:24px; font-weight:700; }
.page-head p { margin:4px 0 0; color:var(--ink-soft); font-size:14px; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none;
  box-shadow:var(--shadow-sm); transition:filter .12s;
}
.btn:hover { filter:brightness(.97); }
.btn svg { width:15px; height:15px; }
.btn-primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn-primary:hover { filter:brightness(1.08); }
.btn-ghost { background:transparent; box-shadow:none; }
.btn-danger { background:var(--crit); border-color:var(--crit); color:#fff; }

/* ---------- cards / panels ---------- */
.panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden;
}
.panel-pad { padding:20px 22px; }
.panel-head { padding:15px 18px; border-bottom:1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.panel-head h3 { font-size:15px; font-weight:600; }
.panel-head a:not(.btn) { font-size:12.5px; color:var(--blue); text-decoration:none; font-weight:600; }

/* ---------- stat cards ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1080px){ .stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .stats { grid-template-columns:1fr; } }
.stat {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 17px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:9px;
}
.stat .k { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.stat .v { font-family:var(--font-display); font-weight:700; font-size:27px; line-height:1; }
.stat .foot { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); }
.stat.feature { background:var(--grad); border:none; color:#fff; box-shadow:var(--shadow-md); flex-direction:row; align-items:center; gap:16px; }
.stat.feature .k { color:rgba(255,255,255,.82); }
.stat.feature .v { font-size:30px; color:#fff; }
.stat.feature .foot { color:rgba(255,255,255,.85); }

/* ---------- rows / grid ---------- */
.row { display:grid; grid-template-columns:1.7fr 1fr; gap:18px; align-items:start; }
@media (max-width:1000px){ .row { grid-template-columns:1fr; } }

/* ---------- tables ---------- */
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:13.5px; color:var(--ink); }
table.data th {
  text-align:left; padding:10px 18px; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; border-bottom:1px solid var(--border-soft); background:var(--surface-2);
}
table.data td { padding:12px 18px; border-bottom:1px solid var(--border-soft); }
table.data tr:last-child td { border-bottom:none; }
table.data tbody tr:hover td { background:var(--surface-2); }
table.data.compact th { padding:9px 12px; }
table.data.compact td { padding:10px 12px; vertical-align:top; font-size:13px; }
@media (max-width:1100px){ table.data.compact { font-size:12.5px; } table.data.compact td { padding:9px 9px; } }

.emp { display:flex; align-items:center; gap:10px; }
.emp .pic { width:30px; height:30px; border-radius:8px; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; font-weight:700; font-size:11.5px; font-family:var(--font-display); flex:none; }
.emp > div { min-width:0; }
.emp .n { font-weight:600; white-space:nowrap; }
.emp .c { font-size:11.5px; color:var(--ink-faint); }

/* ---------- pills / tags ---------- */
.pill { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:600; }
.pill::before { content:""; width:6px; height:6px; border-radius:99px; background:currentColor; }
.pill.ok { color:var(--green-deep); background:var(--green-tint); }
.pill.warn { color:var(--warn); background:var(--warn-tint); }
.pill.crit { color:var(--crit); background:var(--crit-tint); }
.pill.muted { color:var(--ink-faint); background:var(--surface-2); }
.tag { font-size:11.5px; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--border-soft); padding:2px 8px; border-radius:6px; }

/* ---------- forms ---------- */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label { font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.field input, .field select, .field textarea {
  font:inherit; font-size:14px; padding:10px 12px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint);
}

/* ---------- forms: page layout ---------- */
.breadcrumb { font-size:12.5px; color:var(--ink-faint); }
.breadcrumb a { color:var(--blue); text-decoration:none; font-weight:600; }
.form-panel {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:24px 24px 8px; max-width:720px;
}
.form-actions {
  display:flex; gap:10px; padding-top:18px; margin-top:8px; border-top:1px solid var(--border-soft);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form-row { grid-template-columns:1fr; } }
.field .help { font-size:12px; color:var(--ink-faint); }
.form-err {
  background:var(--crit-tint); color:var(--crit); border:1px solid color-mix(in srgb, var(--crit) 35%, transparent);
  border-radius:9px; padding:11px 13px; font-size:13px; font-weight:600; margin-bottom:18px;
}
.checkbox { display:flex; align-items:center; gap:9px; font-size:13.5px; }
.checkbox input { width:auto; }

.days { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
@media (max-width:560px){ .days { grid-template-columns:repeat(4,1fr); } }
.day input { position:absolute; opacity:0; pointer-events:none; }
.day label {
  margin:0; display:flex; align-items:center; justify-content:center; min-height:42px;
  border:1px solid var(--border); border-radius:9px; cursor:pointer; font-size:12px;
  font-weight:600; background:var(--surface); color:var(--ink-soft);
}
.day input:checked + label { background:var(--blue); border-color:var(--blue); color:#fff; }

/* ---------- filter bar ---------- */
.filterbar {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:14px 16px; margin-bottom:16px;
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
}
.filterbar .fg { display:flex; flex-direction:column; gap:5px; }
.filterbar label { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.filterbar select, .filterbar input[type="date"] {
  font:inherit; font-size:13.5px; height:38px; padding:0 10px; border:1px solid var(--border);
  border-radius:8px; background:var(--surface); color:var(--ink); min-width:180px;
}
.date-nav { display:flex; gap:6px; align-items:center; }
.date-nav a {
  width:38px; height:38px; border:1px solid var(--border); border-radius:8px; background:var(--surface);
  display:grid; place-items:center; text-decoration:none; color:var(--ink); font-weight:700;
}

/* ---------- kpi strip (fixed columns) ---------- */
.kpi-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:18px; }
.kpi {
  background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:14px 15px;
  box-shadow:var(--shadow-sm); border-left:3px solid var(--ink-faint);
}
.kpi .k { color:var(--ink-faint); font-size:10px; letter-spacing:.05em; text-transform:uppercase; font-weight:600; }
.kpi .v { margin-top:6px; font-family:var(--font-display); font-size:24px; font-weight:700; }
.kpi.b { border-left-color:var(--blue); }
.kpi.g { border-left-color:var(--green); }
.kpi.r { border-left-color:var(--crit); }
.kpi.o { border-left-color:var(--warn); }

/* ---------- detail views ---------- */
.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 22px; }
@media (max-width:560px){ .detail-grid { grid-template-columns:1fr; } }
.detail-grid .k { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:2px; }
.detail-grid .v { font-size:14px; }
.profile-head { display:flex; gap:20px; align-items:center; }
.profile-head .pic { width:88px; height:88px; border-radius:14px; object-fit:cover; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:30px; flex:none; }
.profile-head h1 { font-size:22px; }
.profile-head .meta { color:var(--ink-soft); font-size:13.5px; margin-top:4px; }

.alert { padding:12px 14px; border-radius:9px; font-size:13px; margin-bottom:16px; }
.alert.info { background:var(--blue-tint); color:var(--blue-deep); }
.alert.ok { background:var(--green-tint); color:var(--green-deep); }
.alert.warn { background:var(--warn-tint); color:var(--warn); }
.alert.danger { background:var(--crit-tint); color:var(--crit); }
.panel.danger { border-color:color-mix(in srgb, var(--crit) 30%, var(--border)); }

/* ---------- misc ---------- */
.empty { padding:40px 20px; text-align:center; color:var(--ink-faint); font-size:14px; }
.divider { height:1px; background:var(--border-soft); border:0; margin:0; }
::selection { background:var(--blue); color:#fff; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }