:root {
  color-scheme: light;
  --bg: #f7f3ef;
  --bg-2: #efe8e2;
  --surface: rgba(255,255,255,.78);
  --surface-solid: #fffdfa;
  --surface-strong: #ffffff;
  --text: #2c292b;
  --muted: #756e72;
  --line: rgba(63,48,53,.11);
  --line-strong: rgba(63,48,53,.18);
  --brand: #a95362;
  --brand-2: #d87869;
  --brand-3: #7d70c8;
  --brand-soft: rgba(169,83,98,.12);
  --success: #27856e;
  --success-soft: rgba(39,133,110,.12);
  --warning: #b57728;
  --warning-soft: rgba(181,119,40,.14);
  --danger: #c34d57;
  --danger-soft: rgba(195,77,87,.12);
  --info: #5578c7;
  --info-soft: rgba(85,120,199,.12);
  --live: #ad4b8d;
  --neutral: #756e72;
  --shadow-sm: 0 6px 22px rgba(63,45,50,.07);
  --shadow-md: 0 18px 50px rgba(63,45,50,.11);
  --shadow-lg: 0 35px 90px rgba(63,45,50,.16);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --sidebar: 270px;
  --topbar: 76px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --border: var(--line);
  --radius-xl: 24px;
  --accent: var(--brand-3);
  --surface-2: var(--surface-solid);
  --surface-subtle: color-mix(in srgb,var(--surface-solid) 70%,transparent);
  --text-muted: var(--muted);
  --brand-strong: #7f3f4e;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171416;
  --bg-2: #211b1f;
  --surface: rgba(40,34,38,.75);
  --surface-solid: #252024;
  --surface-strong: #2b2429;
  --text: #f5eff2;
  --muted: #b6aab1;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --brand: #e18a98;
  --brand-2: #ee9a7e;
  --brand-3: #a99bff;
  --brand-soft: rgba(225,138,152,.15);
  --success: #6bcbb0;
  --success-soft: rgba(107,203,176,.14);
  --warning: #e5b765;
  --warning-soft: rgba(229,183,101,.14);
  --danger: #f08088;
  --danger-soft: rgba(240,128,136,.14);
  --info: #8da8f0;
  --info-soft: rgba(141,168,240,.14);
  --live: #ef8bcc;
  --neutral: #aaa0a5;
  --shadow-sm: 0 8px 28px rgba(0,0,0,.18);
  --shadow-md: 0 20px 60px rgba(0,0,0,.3);
  --shadow-lg: 0 40px 100px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 5%, rgba(216,120,105,.16), transparent 26rem),
    radial-gradient(circle at 95% 15%, rgba(125,112,200,.11), transparent 30rem),
    linear-gradient(145deg, var(--bg), var(--bg-2));
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  z-index: -1;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
svg.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 14px auto 14px 14px;
  width: calc(var(--sidebar) - 14px);
  padding: 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-solid) 80%, transparent);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(24px) saturate(1.2);
  display: flex;
  flex-direction: column;
  z-index: 30;
  transition: transform .35s var(--ease), width .35s var(--ease);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 20px;
}
.brand img { width: 46px; height: 46px; border-radius: 16px; }
.brand-copy strong { display: block; font-size: 17px; letter-spacing: -.02em; }
.brand-copy span { color: var(--muted); font-size: 12px; }
.nav-section { margin-top: 8px; }
.nav-label { padding: 10px 12px 7px; color: var(--muted); font-size: 10px; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 45px;
  padding: 10px 13px;
  margin: 3px 0;
  border-radius: 15px;
  color: var(--muted);
  font-weight: 640;
  transition: transform .2s var(--ease), color .2s, background .2s;
}
.nav-link:hover { color: var(--text); background: var(--brand-soft); transform: translateX(3px); }
.nav-link.active {
  color: var(--brand);
  background: linear-gradient(135deg, var(--brand-soft), rgba(125,112,200,.09));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 17%, transparent);
}
.nav-link.active::before {
  content: "";
  position: absolute;
  left: -4px;
  width: 4px;
  height: 22px;
  border-radius: 99px;
  background: linear-gradient(var(--brand-2), var(--brand));
  box-shadow: 0 0 16px color-mix(in srgb, var(--brand) 45%, transparent);
}
.sidebar-footer { margin-top: auto; padding-top: 14px; }
.user-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
}
.user-row { display:flex; align-items:center; gap:10px; }
.avatar {
  width: 38px; height: 38px; border-radius: 13px;
  display:grid; place-items:center;
  color:white; font-weight:800;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
  box-shadow: 0 8px 20px rgba(169,83,98,.22);
}
.user-copy { min-width:0; flex:1; }
.user-copy strong, .user-copy span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-copy strong { font-size:13px; }
.user-copy span { font-size:11px; color:var(--muted); }

.main-area { margin-left: var(--sidebar); min-height:100vh; padding: 14px 20px 90px 12px; }
.topbar {
  position: sticky;
  top: 14px;
  z-index: 20;
  height: var(--topbar);
  display:flex;
  align-items:center;
  gap:14px;
  padding: 12px 16px;
  margin-bottom:18px;
  border:1px solid var(--line);
  border-radius:24px;
  background: color-mix(in srgb, var(--surface-solid) 77%, transparent);
  backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: var(--shadow-sm);
}
.topbar-title { min-width:0; flex:1; }
.topbar-title h1 { margin:0; font-size:clamp(20px,2.3vw,30px); letter-spacing:-.045em; line-height:1.05; }
.topbar-title p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.mobile-menu { display:none; }
.search-trigger {
  min-width:220px; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--line); border-radius:14px;
  color:var(--muted); background:transparent; text-align:left;
}
.search-trigger kbd { margin-left:auto; border:1px solid var(--line); border-bottom-width:2px; border-radius:7px; padding:1px 6px; font-size:10px; }

.page { max-width: 1560px; margin: 0 auto; }
.page-head { display:flex; gap:16px; align-items:flex-end; justify-content:space-between; margin:4px 2px 18px; }
.page-head h2 { margin:0; font-size:clamp(24px,3vw,38px); letter-spacing:-.055em; }
.page-head p { margin:6px 0 0; color:var(--muted); max-width:720px; }
.page-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.bento { display:grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap:16px; }
.span-3 { grid-column: span 3; }.span-4 { grid-column: span 4; }.span-5 { grid-column: span 5; }.span-6 { grid-column: span 6; }.span-7 { grid-column: span 7; }.span-8 { grid-column: span 8; }.span-9 { grid-column: span 9; }.span-12 { grid-column: span 12; }

.card {
  position:relative;
  min-width:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.card.pad { padding:20px; }
.card.hover { transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s; }
.card.hover:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.card::after {
  content:""; position:absolute; inset:auto -25% -60% 35%; height:180px; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb,var(--brand) 9%,transparent), transparent 68%);
}
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 0; }
.card-head h3 { margin:0; font-size:16px; letter-spacing:-.02em; }
.card-head p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.card-body { padding:18px 20px 20px; }
.card-title-row { display:flex; align-items:center; gap:10px; }
.icon-badge { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; background:var(--brand-soft); color:var(--brand); }

.kpi { min-height:150px; padding:19px; display:flex; flex-direction:column; }
.kpi-top { display:flex; align-items:center; justify-content:space-between; }
.kpi-label { color:var(--muted); font-weight:650; font-size:12px; }
.kpi-value { margin-top:16px; font-size:clamp(30px,4vw,48px); font-weight:820; letter-spacing:-.065em; line-height:1; }
.kpi-meta { margin-top:auto; padding-top:12px; color:var(--muted); font-size:12px; display:flex; align-items:center; gap:7px; }
.kpi-accent { position:absolute; width:90px; height:90px; right:-24px; top:-28px; border-radius:50%; filter:blur(2px); opacity:.28; background:linear-gradient(135deg,var(--brand-2),var(--brand-3)); }

.badge, .status {
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:5px 9px; border-radius:999px; font-size:11px; font-weight:760; white-space:nowrap;
  border:1px solid transparent;
}
.status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 14%,transparent); }
.tone-success { color:var(--success); background:var(--success-soft); border-color:color-mix(in srgb,var(--success) 15%,transparent); }
.tone-warning { color:var(--warning); background:var(--warning-soft); border-color:color-mix(in srgb,var(--warning) 15%,transparent); }
.tone-danger { color:var(--danger); background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 15%,transparent); }
.tone-info { color:var(--info); background:var(--info-soft); border-color:color-mix(in srgb,var(--info) 15%,transparent); }
.tone-live { color:var(--live); background:color-mix(in srgb,var(--live) 12%,transparent); }
.tone-neutral { color:var(--neutral); background:color-mix(in srgb,var(--neutral) 10%,transparent); }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 0 rgba(39,133,110,.45); animation:pulse 2s infinite; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:9px 14px; border:1px solid var(--line); border-radius:13px;
  background:var(--surface-solid); color:var(--text); font-weight:720; font-size:13px;
  box-shadow:0 4px 12px rgba(50,35,40,.04);
  transition:transform .18s var(--ease), box-shadow .18s, background .18s, border-color .18s;
}
.btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); border-color:var(--line-strong); }
.btn:active { transform:translateY(1px) scale(.99); }
.btn-primary { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--brand-2),var(--brand)); box-shadow:0 10px 25px color-mix(in srgb,var(--brand) 25%,transparent); }
.btn-primary:hover { box-shadow:0 14px 32px color-mix(in srgb,var(--brand) 35%,transparent); }
.btn-danger { color:var(--danger); background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 15%,transparent); }
.btn-ghost { background:transparent; box-shadow:none; }
.btn-icon { width:40px; padding:0; }
.btn-sm { min-height:34px; padding:7px 10px; border-radius:11px; font-size:12px; }
.btn[disabled] { opacity:.55; cursor:not-allowed; transform:none; }

.filters { display:flex; flex-wrap:wrap; gap:10px; padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--surface); margin-bottom:16px; }
.field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.field.grow { flex:1; }
.field label { color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.02em; }
.input, input[type="text"], input[type="date"], input[type="time"], input[type="number"], input[type="password"], input[type="file"], select, textarea {
  width:100%; min-height:42px; padding:9px 12px; border:1px solid var(--line); border-radius:13px;
  background:color-mix(in srgb,var(--surface-solid) 88%,transparent); outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
textarea { min-height:100px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:color-mix(in srgb,var(--brand) 55%,transparent); box-shadow:0 0 0 4px var(--brand-soft); background:var(--surface-strong); }
.help { color:var(--muted); font-size:11px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid .full { grid-column:1/-1; }
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }

.switch { position:relative; display:inline-flex; align-items:center; gap:9px; cursor:pointer; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch-track { width:42px; height:24px; padding:3px; border-radius:999px; background:var(--line-strong); transition:background .2s; }
.switch-track::after { content:""; display:block; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.18); transition:transform .25s var(--ease); }
.switch input:checked + .switch-track { background:linear-gradient(135deg,var(--brand-2),var(--brand)); }
.switch input:checked + .switch-track::after { transform:translateX(18px); }
.switch-label { font-size:13px; font-weight:650; }

.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-sm); }
table { width:100%; border-collapse:collapse; }
th, td { padding:13px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
th { position:sticky; top:0; z-index:2; background:color-mix(in srgb,var(--surface-solid) 94%,transparent); color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.09em; font-weight:800; }
tbody tr { transition:background .18s; }
tbody tr:hover { background:var(--brand-soft); }
tbody tr:last-child td { border-bottom:none; }
.cell-person { display:flex; align-items:center; gap:10px; min-width:190px; }
.cell-person .avatar { width:34px; height:34px; border-radius:12px; font-size:12px; }
.cell-person strong, .cell-person span { display:block; }
.cell-person span { color:var(--muted); font-size:11px; }
.num { font-variant-numeric:tabular-nums; white-space:nowrap; }
.text-muted { color:var(--muted); }
.text-danger { color:var(--danger); }.text-success { color:var(--success); }.text-warning { color:var(--warning); }.text-brand { color:var(--brand); }

.list { display:flex; flex-direction:column; }
.list-item { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.list-item:last-child { border-bottom:none; }
.list-main { min-width:0; flex:1; }
.list-main strong { display:block; font-size:13px; }
.list-main span { display:block; color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.timeline { position:relative; padding-left:24px; }
.timeline::before { content:""; position:absolute; left:7px; top:7px; bottom:7px; width:2px; background:var(--line); }
.timeline-item { position:relative; padding:0 0 18px 12px; }
.timeline-item::before { content:""; position:absolute; left:-20px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 5px var(--brand-soft); }

.empty { display:grid; place-items:center; min-height:230px; padding:30px; text-align:center; color:var(--muted); }
.empty .icon-badge { width:58px; height:58px; border-radius:20px; margin-bottom:12px; }
.empty h3 { margin:0 0 5px; color:var(--text); }
.empty p { max-width:440px; margin:0; }

.chart { min-height:210px; position:relative; }
.bar-chart { height:210px; display:flex; align-items:flex-end; gap:12px; padding:18px 6px 0; }
.bar-group { flex:1; min-width:24px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; }
.bar-stack { width:min(34px,80%); height:calc(var(--value,0) * 1%); min-height:4px; border-radius:12px 12px 5px 5px; background:linear-gradient(180deg,var(--brand-2),var(--brand)); box-shadow:0 8px 16px color-mix(in srgb,var(--brand) 18%,transparent); transform-origin:bottom; animation:growBar .8s var(--ease) both; }
.bar-label { color:var(--muted); font-size:10px; }
.donut { width:150px; aspect-ratio:1; margin:auto; border-radius:50%; background:conic-gradient(var(--brand) 0 var(--part,50%), var(--line) var(--part,50%) 100%); position:relative; }
.donut::after { content:""; position:absolute; inset:20px; border-radius:50%; background:var(--surface-solid); }
.donut-center { position:absolute; inset:0; display:grid; place-items:center; z-index:1; text-align:center; }
.donut-center strong { font-size:26px; letter-spacing:-.04em; }
.donut-center span { color:var(--muted); font-size:10px; }

.tabs { display:flex; gap:5px; padding:5px; border:1px solid var(--line); border-radius:15px; background:var(--surface); overflow:auto; }
.tab { flex:0 0 auto; padding:8px 13px; border-radius:11px; color:var(--muted); font-weight:700; font-size:12px; }
.tab.active { color:var(--brand); background:var(--brand-soft); }

.flash-stack { position:fixed; top:24px; right:24px; z-index:100; display:flex; flex-direction:column; gap:10px; width:min(390px,calc(100vw - 32px)); }
.flash { display:flex; align-items:flex-start; gap:11px; padding:13px 14px; border:1px solid var(--line); border-radius:16px; background:var(--surface-strong); box-shadow:var(--shadow-md); animation:toastIn .42s var(--ease) both; }
.flash .icon-badge { width:30px; height:30px; border-radius:10px; flex:none; }
.flash p { margin:2px 0 0; font-size:13px; flex:1; }
.flash-close { border:0; background:transparent; color:var(--muted); padding:4px; }

.dialog-backdrop { position:fixed; inset:0; z-index:90; display:none; place-items:center; padding:20px; background:rgba(20,15,18,.4); backdrop-filter:blur(10px); }
.dialog-backdrop.open { display:grid; animation:fadeIn .2s both; }
.dialog { width:min(620px,100%); max-height:90vh; overflow:auto; border:1px solid var(--line); border-radius:26px; background:var(--surface-solid); box-shadow:var(--shadow-lg); animation:dialogIn .32s var(--ease) both; }
.dialog-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.dialog-body { padding:20px; }

.command-palette { position:fixed; inset:0; z-index:110; display:none; align-items:flex-start; justify-content:center; padding:10vh 18px; background:rgba(20,15,18,.32); backdrop-filter:blur(12px); }
.command-palette.open { display:flex; }
.command-box { width:min(680px,100%); border:1px solid var(--line); border-radius:24px; background:var(--surface-solid); box-shadow:var(--shadow-lg); overflow:hidden; animation:dialogIn .28s var(--ease) both; }
.command-input { display:flex; align-items:center; gap:12px; padding:17px 18px; border-bottom:1px solid var(--line); }
.command-input input { border:0; box-shadow:none; background:transparent; padding:0; min-height:auto; font-size:18px; }
.command-list { padding:8px; max-height:400px; overflow:auto; }
.command-item { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:13px; }
.command-item:hover, .command-item.active { background:var(--brand-soft); color:var(--brand); }

.mobile-nav { display:none; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(420px,.8fr); }
.auth-art { position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(34px,6vw,90px); overflow:hidden; background:linear-gradient(145deg,#7d70c8,#a95362 52%,#e29573); color:white; }
.auth-art::before, .auth-art::after { content:""; position:absolute; border-radius:50%; filter:blur(3px); border:1px solid rgba(255,255,255,.2); }
.auth-art::before { width:520px; height:520px; top:-220px; right:-160px; box-shadow:inset 0 0 80px rgba(255,255,255,.12); }
.auth-art::after { width:340px; height:340px; bottom:15%; left:-180px; background:rgba(255,255,255,.08); }
.auth-art h1 { position:relative; z-index:1; margin:0; font-size:clamp(42px,7vw,86px); line-height:.92; letter-spacing:-.075em; max-width:800px; }
.auth-art p { position:relative; z-index:1; max-width:650px; font-size:17px; opacity:.82; }
.auth-panel { display:grid; place-items:center; padding:30px; background:var(--bg); }
.auth-card { width:min(460px,100%); padding:28px; border:1px solid var(--line); border-radius:28px; background:var(--surface-solid); box-shadow:var(--shadow-md); }
.auth-card .brand { padding:0 0 24px; }
.auth-card h2 { margin:0; font-size:30px; letter-spacing:-.05em; }
.auth-card > p { color:var(--muted); margin:7px 0 24px; }

.section-divider { height:1px; background:var(--line); margin:20px 0; }
.details-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.detail { padding:13px; border:1px solid var(--line); border-radius:15px; background:color-mix(in srgb,var(--surface-solid) 65%,transparent); }
.detail span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.detail strong { display:block; margin-top:5px; font-size:15px; }
.note { padding:13px 14px; border-left:3px solid var(--brand); border-radius:0 13px 13px 0; background:var(--brand-soft); color:var(--muted); }

@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 45%,transparent)} 70%{box-shadow:0 0 0 10px transparent} 100%{box-shadow:0 0 0 0 transparent} }
@keyframes growBar { from{transform:scaleY(0);opacity:.3} to{transform:scaleY(1);opacity:1} }
@keyframes toastIn { from{opacity:0;transform:translateX(24px) scale(.96)} to{opacity:1;transform:none} }
@keyframes dialogIn { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes reveal { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
[data-reveal] { animation:reveal .55s var(--ease) both; animation-delay:calc(var(--i,0) * 55ms); }
.spin { animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

@media (max-width:1200px) {
  :root { --sidebar:230px; }
  .span-3 { grid-column:span 6; }
  .span-4 { grid-column:span 6; }
  .span-5,.span-7 { grid-column:span 6; }
  .details-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .search-trigger { min-width:170px; }
}

@media (max-width:900px) {
  :root { --sidebar:0px; }
  .sidebar { transform:translateX(calc(-100% - 30px)); width:min(290px,calc(100vw - 36px)); }
  body.nav-open .sidebar { transform:translateX(0); }
  body.nav-open::after { content:""; position:fixed; inset:0; background:rgba(20,15,18,.35); backdrop-filter:blur(6px); z-index:25; }
  .main-area { margin-left:0; padding:10px 12px 88px; }
  .topbar { top:8px; height:68px; border-radius:20px; }
  .mobile-menu { display:inline-flex; }
  .search-trigger { min-width:40px; width:40px; padding:0; justify-content:center; }
  .search-trigger span,.search-trigger kbd { display:none; }
  .bento { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9 { grid-column:span 3; }
  .span-12 { grid-column:span 6; }
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mobile-nav {
    position:fixed; left:12px; right:12px; bottom:10px; z-index:24;
    display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:6px;
    border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--surface-solid) 88%,transparent);
    box-shadow:var(--shadow-md); backdrop-filter:blur(22px);
  }
  .mobile-nav a { display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 3px; border-radius:14px; color:var(--muted); font-size:9px; font-weight:700; }
  .mobile-nav a.active { color:var(--brand); background:var(--brand-soft); }
  .mobile-nav .icon { width:19px; height:19px; }
  .auth-shell { grid-template-columns:1fr; }
  .auth-art { min-height:280px; padding:42px 26px; }
  .auth-art h1 { font-size:52px; }
  .auth-panel { padding:18px; }
}

@media (max-width:640px) {
  body { font-size:14px; }
  .topbar-title p { display:none; }
  .topbar-title h1 { font-size:20px; }
  .topbar-actions .btn:not(.btn-icon) span { display:none; }
  .page-head { align-items:flex-start; flex-direction:column; }
  .page-actions { width:100%; justify-content:flex-start; }
  .bento { grid-template-columns:1fr; }
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-12 { grid-column:1; }
  .grid-2,.grid-3,.grid-4,.form-grid,.details-grid { grid-template-columns:1fr; }
  .form-grid .full { grid-column:auto; }
  .kpi { min-height:130px; }
  .table-wrap.responsive { border:0; background:transparent; box-shadow:none; overflow:visible; }
  .table-wrap.responsive table,.table-wrap.responsive thead,.table-wrap.responsive tbody,.table-wrap.responsive th,.table-wrap.responsive td,.table-wrap.responsive tr { display:block; }
  .table-wrap.responsive thead { display:none; }
  .table-wrap.responsive tr { margin-bottom:10px; padding:13px; border:1px solid var(--line); border-radius:17px; background:var(--surface); box-shadow:var(--shadow-sm); }
  .table-wrap.responsive td { display:flex; justify-content:space-between; gap:16px; padding:7px 0; border:0; text-align:right; }
  .table-wrap.responsive td::before { content:attr(data-label); color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; text-align:left; }
  .table-wrap.responsive td.primary { display:block; text-align:left; padding-bottom:11px; margin-bottom:5px; border-bottom:1px solid var(--line); }
  .table-wrap.responsive td.primary::before { display:none; }
  .filters { flex-direction:column; }
  .field { width:100%; }
  .flash-stack { top:12px; right:12px; }
  .auth-art { min-height:220px; }
  .auth-art h1 { font-size:42px; }
  .auth-art p { font-size:14px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}

.inline-admin-form{display:grid;grid-template-columns:minmax(190px,1.1fr) minmax(90px,.45fr) minmax(160px,1fr) auto;gap:8px;align-items:center}.inline-admin-form input,.inline-admin-form select{min-width:0}@media(max-width:760px){.inline-admin-form{grid-template-columns:1fr 1fr}.inline-admin-form input[name="note"]{grid-column:1/-1}.inline-admin-form .btn{justify-self:end}}

/* --- Servidor COMANDA y acceso remoto · v1.2 --- */
.nav-live-dot{width:8px;height:8px;border-radius:999px;background:var(--success);margin-left:auto;box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 18%,transparent);animation:soft-pulse 2.4s ease-in-out infinite}
@keyframes soft-pulse{0%,100%{transform:scale(.9);opacity:.72}50%{transform:scale(1.08);opacity:1}}
.remote-hero{position:relative;overflow:hidden;padding:22px 24px;border:1px solid var(--border);border-radius:var(--radius-xl);background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 10%,var(--surface)) 0%,var(--surface) 55%,color-mix(in srgb,var(--accent) 8%,var(--surface)) 100%);box-shadow:var(--shadow-sm)}
.remote-hero:after{content:"";position:absolute;right:-50px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 20%,transparent),transparent 68%);pointer-events:none}
.eyebrow{font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--brand);margin-bottom:7px}
.remote-overview{margin-top:16px;margin-bottom:16px}
.metric-value.compact{font-size:clamp(1rem,1.7vw,1.35rem);line-height:1.15;overflow-wrap:anywhere}
.warm-card{background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 9%,var(--surface)),var(--surface))}
.architecture-card{margin-bottom:16px;overflow:hidden}
.architecture-flow{display:grid;grid-template-columns:minmax(130px,1fr) 72px minmax(150px,1.1fr) 92px minmax(130px,1fr) 72px minmax(130px,1fr);align-items:center;gap:8px;margin:24px 0 18px}
.architecture-node{min-height:128px;border:1px solid var(--border);border-radius:22px;background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.architecture-node:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 45%,var(--border));box-shadow:var(--shadow-sm)}
.architecture-node.highlight{background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 15%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--brand) 35%,var(--border))}
.architecture-node>span{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--brand);margin-bottom:10px}
.architecture-node .icon{width:23px;height:23px}
.architecture-node strong{font-size:.94rem}.architecture-node small{font-size:.75rem;color:var(--text-muted);margin-top:4px;line-height:1.35}
.architecture-link{position:relative;text-align:center;color:var(--text-muted);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.architecture-link:before{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--border),var(--brand),var(--border));margin-bottom:7px}
.architecture-link:after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid var(--brand);border-right:2px solid var(--brand);transform:rotate(45deg)}
.security-note{border-left:4px solid var(--brand)}
.remote-grid{margin-bottom:16px;align-items:start}
.remote-checklist{display:grid;gap:2px;margin-top:16px}
.check-row{display:grid;grid-template-columns:38px 1fr;gap:11px;padding:12px 4px;border-bottom:1px solid var(--border)}
.check-row:last-child{border-bottom:0}.check-row strong{font-size:.9rem}.check-row p{margin:3px 0 0;color:var(--text-muted);font-size:.79rem;line-height:1.45}
.check-dot{width:32px;height:32px;border-radius:12px;background:var(--surface-2);color:var(--text-muted);display:grid;place-items:center}.check-dot.done{background:color-mix(in srgb,var(--success) 13%,var(--surface));color:var(--success)}.check-dot .icon{width:17px;height:17px}
.code-block{position:relative;margin:17px 0;padding:16px 72px 16px 16px;border-radius:16px;background:color-mix(in srgb,var(--text) 92%,var(--surface));color:var(--surface);overflow:auto;font-size:.78rem;line-height:1.65}
.code-block code{color:inherit;white-space:nowrap}.copy-code{position:absolute;right:9px;top:9px;border:1px solid color-mix(in srgb,var(--surface) 25%,transparent);border-radius:10px;background:color-mix(in srgb,var(--surface) 12%,transparent);color:inherit;padding:6px 9px;font:inherit;cursor:pointer}.copy-code:hover{background:color-mix(in srgb,var(--surface) 22%,transparent)}
.step-list{list-style:none;padding:0;margin:17px 0;display:grid;gap:13px}.step-list li{display:grid;grid-template-columns:34px 1fr;gap:11px}.step-list li>span{width:30px;height:30px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 13%,var(--surface));color:var(--brand);font-weight:800}.step-list strong{font-size:.9rem}.step-list p{margin:3px 0 0;color:var(--text-muted);font-size:.8rem;line-height:1.45}
.danger-zone{border-color:color-mix(in srgb,var(--danger) 30%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--danger) 4%,var(--surface)),var(--surface))}.split-action{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:17px}.split-action p{margin:3px 0 0;color:var(--text-muted);font-size:.82rem}.btn-danger{background:var(--danger);color:white;border-color:var(--danger)}
textarea{resize:vertical;min-height:86px}
@media(max-width:1100px){.architecture-flow{grid-template-columns:1fr 46px 1fr;row-gap:14px}.architecture-link:nth-of-type(4),.architecture-link:nth-of-type(6){display:none}.architecture-node:nth-of-type(5),.architecture-node:nth-of-type(7){grid-column:auto}.architecture-flow .architecture-node{min-height:112px}}
@media(max-width:760px){.remote-hero{padding:18px}.architecture-flow{grid-template-columns:1fr}.architecture-link{height:34px}.architecture-link:before{width:2px;height:26px;margin:0 auto;background:linear-gradient(var(--border),var(--brand))}.architecture-link:after{right:calc(50% - 4px);top:17px;transform:rotate(135deg)}.architecture-node{min-height:100px}.split-action{align-items:flex-start;flex-direction:column}.split-action form,.split-action .btn{width:100%}.code-block{padding-right:16px;padding-top:48px}.copy-code{left:10px;right:auto}.remote-grid{grid-template-columns:1fr}}

/* Cordelia Control 1.2 · COMANDA y acceso remoto */
.server-hero { padding:22px 24px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(135deg,color-mix(in srgb,var(--brand-soft) 78%,var(--surface-solid)),var(--surface-solid)); box-shadow:var(--shadow-sm); }
.server-hero .eyebrow { color:var(--brand); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.hero-statuses { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.server-bento .metric-value.compact { font-size:clamp(21px,2.2vw,31px); letter-spacing:-.04em; line-height:1.08; overflow-wrap:anywhere; }
.architecture-flow { display:grid; grid-template-columns:1fr auto 1.12fr auto 1fr auto 1fr; align-items:stretch; gap:9px; }
.flow-node { min-width:0; padding:16px 14px; border:1px solid var(--line); border-radius:17px; background:color-mix(in srgb,var(--surface-solid) 76%,transparent); display:flex; flex-direction:column; justify-content:center; }
.flow-node.featured { background:linear-gradient(145deg,var(--brand-soft),color-mix(in srgb,var(--surface-solid) 85%,var(--brand-soft))); border-color:color-mix(in srgb,var(--brand) 30%,var(--line)); }
.flow-node span { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.flow-node strong { margin-top:6px; font-size:14px; overflow-wrap:anywhere; }
.flow-node small { color:var(--muted); margin-top:4px; }
.flow-arrow { display:grid; place-items:center; color:var(--brand); font-size:22px; font-weight:800; }
.server-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.server-actions form { display:inline-flex; }
.settings-cluster { padding:18px; margin-bottom:14px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--surface-solid) 72%,transparent); }
.cluster-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.cluster-head > span,.step-dot { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:white; background:linear-gradient(135deg,var(--brand),var(--brand-strong)); font-size:12px; font-weight:900; box-shadow:0 7px 18px color-mix(in srgb,var(--brand) 28%,transparent); }
.cluster-head strong { display:block; }
.cluster-head small { display:block; color:var(--muted); margin-top:3px; line-height:1.45; }
.deployment-checklist { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.deployment-checklist > div { position:relative; padding:17px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--surface-solid) 74%,transparent); }
.deployment-checklist strong { display:block; margin-top:13px; }
.deployment-checklist p { color:var(--muted); line-height:1.55; margin:7px 0 0; }
.access-identity { display:flex; align-items:center; gap:8px; padding:11px 12px; margin:-8px 0 16px; border:1px solid color-mix(in srgb,var(--success) 25%,var(--line)); border-radius:13px; background:color-mix(in srgb,var(--success) 9%,var(--surface-solid)); color:var(--muted); font-size:12px; }
.access-identity .icon { color:var(--success); }
.access-identity.muted { border-color:var(--line); background:var(--surface-subtle); }
.remote-dot { display:inline-flex; align-items:center; gap:5px; }
.remote-dot::before { content:""; width:6px; height:6px; border-radius:999px; background:var(--success); box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 15%,transparent); }
textarea { resize:vertical; min-height:76px; }
.btn-danger { color:#fff; background:var(--danger); border-color:var(--danger); }
.btn-danger:hover { filter:brightness(.94); }
.empty-cell { text-align:center; color:var(--muted); padding:28px !important; }

@media (max-width:1100px) {
  .architecture-flow { grid-template-columns:1fr; }
  .flow-arrow { transform:rotate(90deg); height:18px; }
  .deployment-checklist { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .server-hero { padding:18px; align-items:flex-start; }
  .hero-statuses { justify-content:flex-start; }
  .deployment-checklist { grid-template-columns:1fr; }
  .settings-cluster { padding:14px; }
}

/* ========================================================================== 
   Cordelia Control 1.3 · Reportes-inspired 2026 responsive system
   Original implementation: violet/indigo analytics language, no copied assets.
   ========================================================================== */
:root {
  --bg:#f7f3ef;
  --bg-2:#efe8e2;
  --surface:rgba(255,255,255,.94);
  --surface-solid:#fffdfa;
  --surface-strong:#ffffff;
  --text:#2c292b;
  --muted:#756e72;
  --line:rgba(63,48,53,.11);
  --line-strong:rgba(63,48,53,.18);
  --brand:#a95362;
  --brand-2:#d87869;
  --brand-3:#7d70c8;
  --brand-strong:#7f3f4e;
  --brand-soft:rgba(169,83,98,.12);
  --accent:#d87869;
  --success:#27856e;
  --success-soft:rgba(39,133,110,.12);
  --warning:#b57728;
  --warning-soft:rgba(181,119,40,.14);
  --danger:#c34d57;
  --danger-soft:rgba(195,77,87,.12);
  --info:#7d70c8;
  --info-soft:rgba(125,112,200,.12);
  --live:#ad4b8d;
  --neutral:#756e72;
  --shadow-sm:0 4px 18px rgba(63,45,50,.055);
  --shadow-md:0 14px 38px rgba(63,45,50,.09);
  --shadow-lg:0 28px 80px rgba(63,45,50,.15);
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:22px;
  --sidebar:238px;
  --topbar:72px;
  --ease:cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"] {
  --bg:#171416;
  --bg-2:#211b1f;
  --surface:rgba(40,34,38,.94);
  --surface-solid:#252024;
  --surface-strong:#2b2429;
  --text:#f5eff2;
  --muted:#b6aab1;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --brand:#e18a98;
  --brand-2:#ee9a7e;
  --brand-3:#a99bff;
  --brand-strong:#f0a0ad;
  --brand-soft:rgba(225,138,152,.15);
  --accent:#ee9a7e;
  --info:#a99bff;
  --info-soft:rgba(169,155,255,.14);
  --shadow-sm:0 6px 22px rgba(0,0,0,.18);
  --shadow-md:0 16px 48px rgba(0,0,0,.28);
  --shadow-lg:0 32px 90px rgba(0,0,0,.38);
}

body {
  background:
    radial-gradient(circle at 86% -10%, color-mix(in srgb,var(--brand-2) 10%,transparent), transparent 26rem),
    linear-gradient(180deg,var(--bg),var(--bg-2));
  letter-spacing:-.006em;
}
body::before { opacity:.07; mix-blend-mode:multiply; }
html[data-theme="dark"] body::before { mix-blend-mode:soft-light; opacity:.08; }

::selection { background:color-mix(in srgb,var(--brand) 25%,transparent); }
:focus-visible { outline:3px solid color-mix(in srgb,var(--brand) 28%,transparent); outline-offset:2px; }

.sidebar {
  inset:0 auto 0 0;
  width:var(--sidebar);
  padding:20px 14px 16px;
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  background:color-mix(in srgb,var(--surface-solid) 96%,transparent);
  box-shadow:8px 0 30px rgba(63,45,50,.025);
  backdrop-filter:blur(22px) saturate(1.15);
}
.brand { padding:2px 8px 22px; }
.brand img { width:42px;height:42px;border-radius:13px;box-shadow:0 10px 26px rgba(169,83,98,.20); }
.brand-copy strong { font-size:18px; }
.brand-copy span { font-size:11px; }
.nav-label { font-size:9px; letter-spacing:.16em; padding-top:14px; }
.nav-link {
  min-height:42px;
  padding:9px 12px;
  margin:2px 0;
  border-radius:10px;
  font-size:13px;
  font-weight:650;
}
.nav-link:hover { transform:translateX(2px); background:var(--brand-soft); }
.nav-link.active {
  background:linear-gradient(110deg,color-mix(in srgb,var(--brand) 12%,var(--surface-solid)),color-mix(in srgb,var(--brand-3) 6%,var(--surface-solid)));
  color:var(--brand);
  box-shadow:none;
}
.nav-link.active::before { left:-14px;width:3px;height:25px;background:linear-gradient(var(--brand-2),var(--brand-3));box-shadow:none; }
.nav-dot { width:7px;height:7px;margin-left:auto;border-radius:99px;background:var(--success);box-shadow:0 0 0 4px var(--success-soft); }
.sidebar-promo {
  margin:auto 2px 14px;
  padding:17px 14px;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(145deg,#4e55ef 0%,#7456ed 55%,#8e52ee 100%);
  box-shadow:0 18px 34px rgba(92,75,233,.23);
  overflow:hidden;
  position:relative;
}
.sidebar-promo::before { content:"";position:absolute;inset:-50% -35% auto auto;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.12); }
.sidebar-promo > * { position:relative;z-index:1; }
.sidebar-promo strong,.sidebar-promo span { display:block; }
.sidebar-promo span { opacity:.78;font-size:11px;line-height:1.45;margin:5px 0 13px; }
.sidebar-promo .btn { background:#fff;color:var(--brand-strong);border:0;width:100%; }
.promo-illustration { margin-bottom:10px;opacity:.9; }
.icon-xl { width:31px!important;height:31px!important; }
.user-card { border:0;background:var(--bg);border-radius:12px;padding:10px; }
.avatar { border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 20px rgba(169,83,98,.18); }

.main-area { margin-left:var(--sidebar);padding:0 30px 80px; }
.topbar {
  top:0;
  height:var(--topbar);
  margin:0 -30px 24px;
  padding:12px 30px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:color-mix(in srgb,var(--surface-solid) 88%,transparent);
  box-shadow:0 7px 25px rgba(34,38,72,.025);
}
.topbar-title h1 { font-size:22px;letter-spacing:-.04em; }
.topbar-title .eyebrow { margin:0 0 2px;font-size:9px;letter-spacing:.14em;color:var(--muted); }
.topbar-date { color:var(--muted);font-size:12px;white-space:nowrap; }
.search-trigger { min-width:260px;border-color:var(--line);background:var(--bg);border-radius:10px;height:40px;font-size:12px; }
.search-trigger:hover { border-color:color-mix(in srgb,var(--brand) 32%,var(--line));background:var(--surface-solid); }
.page { max-width:1640px; }
.page-head { align-items:center;margin:6px 0 20px; }
.page-head h2 { font-size:clamp(25px,2.5vw,36px);letter-spacing:-.05em; }
.hero-head { padding:8px 0 4px; }
.profile-title-row { display:flex;align-items:center;gap:15px;margin-top:8px; }
.profile-title-row .avatar { width:58px;height:58px;border-radius:17px;font-size:18px; }
.profile-title-row h2 { margin:0; }
.profile-statuses { display:flex;gap:8px;flex-wrap:wrap; }
.back-link { display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:12px;font-weight:700;margin-bottom:4px; }
.back-link .icon { width:15px;height:15px;transform:rotate(180deg); }

.card {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-solid);
  box-shadow:var(--shadow-sm);
  backdrop-filter:none;
}
.card::after { display:none; }
.card.hover { transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease); }
.card.hover:hover { transform:translateY(-4px);border-color:color-mix(in srgb,var(--brand) 22%,var(--line));box-shadow:var(--shadow-md); }
.card-head { padding:18px 20px 0; }
.card-head h3 { font-size:15px; }
.card-head p { font-size:11px; }
.card-body { padding:18px 20px 20px; }
.card-body.no-pad { padding:10px 0 0; }
.icon-badge { width:36px;height:36px;border-radius:11px;color:var(--brand);background:var(--brand-soft); }
.icon-badge.tone-warning { color:var(--warning);background:var(--warning-soft); }
.icon-badge.tone-danger { color:var(--danger);background:var(--danger-soft); }

.bento { gap:16px; }
.kpi { min-height:142px;padding:18px; }
.kpi-value { margin-top:13px;font-size:clamp(32px,3.2vw,44px);font-weight:800;color:var(--text); }
.kpi-label { font-size:11px;text-transform:none; }
.kpi-meta { font-size:11px; }
.kpi-accent { width:82px;height:82px;right:-22px;top:-25px;opacity:.12;background:linear-gradient(135deg,var(--brand),var(--brand-2)); }

.btn {
  min-height:38px;
  border-radius:10px;
  border-color:var(--line);
  background:var(--surface-solid);
  font-size:12px;
  font-weight:720;
  box-shadow:none;
  transition:transform .18s var(--ease),background .18s,border-color .18s,box-shadow .18s;
}
.btn:hover { transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand) 28%,var(--line));box-shadow:0 8px 18px rgba(65,70,115,.07); }
.btn-primary { color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 9px 22px rgba(169,83,98,.20); }
.btn-primary:hover { box-shadow:0 12px 28px rgba(169,83,98,.28); }
.btn-lg { min-height:46px;padding:12px 18px;font-size:13px; }
.btn-ghost { background:transparent; }
.btn-icon { border-radius:10px; }

.badge,.status { padding:5px 9px;font-size:10px; }
.status::before { width:6px;height:6px;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent); }
.id-chip { display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:5px 8px;border-radius:8px;background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:800; }
.credential-pills { display:flex;gap:6px;flex-wrap:wrap; }
.credential-pill { display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:8px;background:var(--bg);color:var(--muted);font-size:10px;font-weight:750;border:1px solid var(--line); }
.credential-pill.is-on { background:var(--success-soft);color:var(--success);border-color:color-mix(in srgb,var(--success) 18%,var(--line)); }
.credential-pill .icon { width:14px;height:14px; }

.table-wrap { border-radius:13px;border:1px solid var(--line);box-shadow:none; }
table { font-size:12px; }
th { padding:11px 14px;background:#fafbfe;color:#8b90a8;font-size:9px;letter-spacing:.08em;text-transform:uppercase; }
html[data-theme="dark"] th { background:rgba(255,255,255,.025); }
td { padding:12px 14px;border-color:var(--line); }
tbody tr { transition:background .18s ease; }
tbody tr:hover { background:color-mix(in srgb,var(--brand) 3.5%,var(--surface-solid)); }
.cell-person .avatar { width:34px;height:34px;font-size:11px; }
.cell-person strong { font-size:12px; }
.cell-person span,.micro-copy { color:var(--muted);font-size:10px; }
.no-pad .table-wrap { border-left:0;border-right:0;border-bottom:0;border-radius:0 0 var(--radius) var(--radius); }

.field label { color:var(--text);font-size:10px;letter-spacing:.025em; }
input,select,textarea {
  border-radius:10px!important;
  border:1px solid var(--line)!important;
  background:var(--bg)!important;
  min-height:41px;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
input:focus,select:focus,textarea:focus { border-color:color-mix(in srgb,var(--brand) 50%,var(--line))!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 9%,transparent);background:var(--surface-solid)!important;outline:0; }
textarea { min-height:90px; }
.help { font-size:10px; }
.input-icon,.password-field,.input-prefix { position:relative;display:flex;align-items:center; }
.input-icon > .icon { position:absolute;left:12px;width:17px;height:17px;color:var(--muted);pointer-events:none; }
.input-icon input { width:100%;padding-left:38px!important; }
.password-field input { width:100%;padding-right:46px!important; }
.password-field .btn { position:absolute;right:3px;border:0; }
.input-prefix > span { position:absolute;left:12px;color:var(--muted);font-weight:800; }
.input-prefix input { width:100%;padding-left:28px!important; }

.filters,.floating-filters { background:var(--surface-solid);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow-sm); }
.floating-filters { margin-bottom:16px; }
.align-end { align-self:end; }
.legend { display:flex;gap:12px;color:var(--muted);font-size:10px; }
.legend span { display:flex;align-items:center;gap:5px; }
.legend-dot { width:7px;height:7px;border-radius:50%;background:var(--muted); }
.legend-dot.success { background:var(--success); }.legend-dot.info { background:var(--info); }

.choice-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px; }
.choice-card { position:relative;display:flex;align-items:center;gap:10px;min-height:72px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);cursor:pointer;transition:.2s var(--ease); }
.choice-card:hover { border-color:color-mix(in srgb,var(--brand) 30%,var(--line));transform:translateY(-1px); }
.choice-card:has(input:checked) { border-color:color-mix(in srgb,var(--brand) 42%,var(--line));background:var(--brand-soft); }
.choice-card input { position:absolute;opacity:0;pointer-events:none; }
.choice-icon { display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:9px;color:var(--brand);background:var(--surface-solid);border:1px solid var(--line); }
.choice-icon .icon { width:16px;height:16px; }
.choice-card strong,.choice-card small { display:block; }
.choice-card strong { font-size:11px; }.choice-card small { color:var(--muted);font-size:9px;margin-top:2px;line-height:1.35; }
.compact-choices { grid-template-columns:repeat(2,1fr);margin-top:0; }

.switch-label strong,.switch-label small { display:block; }.switch-label small { color:var(--muted);font-size:9px;margin-top:2px; }
.action-switch { margin-top:15px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg); }
.callout { display:flex;flex-direction:column;gap:4px;margin-top:14px;padding:12px;border-radius:11px;font-size:10px;line-height:1.45;background:var(--bg);border:1px solid var(--line); }
.callout strong { font-size:11px; }.callout.tone-warning { color:var(--warning);background:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 20%,var(--line)); }.callout.tone-info { color:var(--info);background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 20%,var(--line)); }
.security-note { display:flex;align-items:flex-start;gap:11px;padding:13px;border-radius:12px;border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line));border-left:3px solid var(--brand);background:var(--brand-soft); }
.security-note p { margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.45; }.compact-note { margin-top:15px; }

.credential-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.credential-stat { padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--bg); }
.credential-icon { display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface-solid);color:var(--brand);margin-bottom:9px; }
.credential-icon .icon { width:15px;height:15px; }.credential-stat small,.credential-stat strong { display:block; }.credential-stat small { color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em; }.credential-stat strong { margin-top:3px;font-size:11px; }
.capability-list,.settings-stack { display:grid;gap:11px; }
.capability-row { display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:11px; }.capability-row:last-child { border-bottom:0;padding-bottom:0; }
.compact-empty { min-height:90px!important; }.compact-empty > *,.compact-empty p { margin:0; }
.compact-timeline .timeline-item { padding-bottom:10px; }
.sticky-form-actions { position:sticky;bottom:14px;z-index:10;display:flex;justify-content:flex-end;gap:9px;padding:10px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface-solid) 90%,transparent);backdrop-filter:blur(18px);box-shadow:var(--shadow-md); }

.appearance-demo { display:grid;grid-template-columns:72px 1fr;min-height:210px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg); }
.demo-sidebar { padding:16px 10px;background:var(--surface-solid);border-right:1px solid var(--line);display:grid;align-content:start;gap:12px; }
.demo-sidebar span { height:8px;border-radius:10px;background:var(--line-strong); }.demo-sidebar span:first-child { height:28px;background:linear-gradient(135deg,var(--brand),var(--brand-2)); }.demo-sidebar span:nth-child(3) { background:var(--brand-soft); }
.demo-canvas { padding:16px; }.demo-top { height:24px;width:45%;border-radius:8px;background:var(--surface-solid);box-shadow:var(--shadow-sm); }.demo-kpis { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px; }.demo-kpis i { height:62px;border:1px solid var(--line);border-radius:10px;background:var(--surface-solid);box-shadow:var(--shadow-sm); }.demo-chart { height:82px;margin-top:10px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,rgba(169,83,98,.08),transparent),var(--surface-solid);position:relative;overflow:hidden; }.demo-chart::after { content:"";position:absolute;left:8%;right:8%;bottom:20%;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--brand-3));transform:skewY(-8deg);border-radius:99px; }

.bar-stack { background:linear-gradient(180deg,var(--brand-3),var(--brand));border-radius:7px 7px 3px 3px;box-shadow:0 8px 14px rgba(169,83,98,.12); }
.donut { filter:drop-shadow(0 8px 14px rgba(169,83,98,.10)); }

.dialog { border-radius:18px;box-shadow:var(--shadow-lg); }
.command-box { border-radius:18px;box-shadow:var(--shadow-lg); }
.flash { border-radius:12px;box-shadow:var(--shadow-md); }

/* Native/progressive 2026 transitions. Unsupported browsers receive normal navigation. */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:cordelia-page-out .18s ease both; }
::view-transition-new(root) { animation:cordelia-page-in .34s var(--ease) both; }
@keyframes cordelia-page-out { to { opacity:.35;transform:scale(.995); } }
@keyframes cordelia-page-in { from { opacity:0;transform:translateY(6px); } }
@keyframes float-in { from { opacity:0;transform:translateY(14px) scale(.985); } to { opacity:1;transform:none; } }
@keyframes ambient-glow { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(-8px,8px,0) scale(1.08); } }
[data-reveal] { animation:float-in .55s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms); }
html[data-motion="subtle"] [data-reveal] { animation-duration:.28s;animation-delay:0s; }
html[data-motion="expressive"] [data-reveal] { animation-duration:.72s;animation-delay:calc(var(--i,0) * 65ms); }
html[data-motion="expressive"] .kpi-accent { animation:ambient-glow 7s ease-in-out infinite; }
html[data-motion="subtle"] .card.hover:hover,html[data-motion="subtle"] .btn:hover { transform:none; }
html[data-density="compact"] .card-head { padding:14px 16px 0; }
html[data-density="compact"] .card-body { padding:14px 16px 16px; }
html[data-density="compact"] td { padding:9px 12px; }
html[data-density="compact"] .nav-link { min-height:38px;padding:7px 10px; }

@supports (animation-timeline:view()) {
  .card[data-scroll-animate] { animation:float-in linear both;animation-timeline:view();animation-range:entry 5% cover 24%; }
}
@container (max-width:520px) {
  .credential-summary { grid-template-columns:1fr; }
}

@media (max-width:1200px) {
  :root { --sidebar:220px; }
  .main-area { padding-left:22px;padding-right:22px; }
  .topbar { margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px; }
  .search-trigger { min-width:190px; }
}
@media (max-width:900px) {
  :root { --sidebar:0px; }
  .sidebar { width:min(286px,calc(100vw - 34px));border-radius:0 20px 20px 0;box-shadow:var(--shadow-lg);transform:translateX(calc(-100% - 30px)); }
  .main-area { margin-left:0;padding:0 16px 96px; }
  .topbar { top:0;margin:0 -16px 20px;padding:10px 16px;height:66px; }
  .mobile-nav { border-radius:16px;background:color-mix(in srgb,var(--surface-solid) 92%,transparent); }
  .sidebar-promo { display:none; }
  .topbar-date { display:none; }
}
@media (max-width:720px) {
  .page-head { align-items:flex-start; }
  .hero-head { padding-top:0; }
  .choice-grid,.credential-summary { grid-template-columns:1fr; }
  .sticky-form-actions { bottom:82px; }
  .appearance-demo { grid-template-columns:48px 1fr;min-height:180px; }
  .profile-title-row { align-items:flex-start; }
  .profile-title-row .avatar { width:48px;height:48px; }
  .split-action { width:100%; }
  .split-action form,.split-action .btn { width:100%; }
}
@media (max-width:640px) {
  .main-area { padding-left:12px;padding-right:12px; }
  .topbar { margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px; }
  .topbar-actions { gap:4px; }
  .topbar-actions > .status,.topbar-actions > .topbar-date { display:none; }
  .page-head h2 { font-size:25px; }
  .page-head p { font-size:12px; }
  .card-head { padding:16px 16px 0; }.card-body { padding:16px; }
  .kpi { min-height:118px;padding:15px; }
  .kpi-value { font-size:34px; }
  .table-wrap.responsive tr { background:var(--surface-solid);border-radius:13px;box-shadow:var(--shadow-sm); }
  .filters { padding:10px; }
  .sticky-form-actions { left:12px;right:12px;justify-content:stretch; }.sticky-form-actions .btn { flex:1; }
  .credential-card { order:-1; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation:none; }
  html { scroll-behavior:auto; }
  [data-reveal] { animation:none!important;opacity:1!important;transform:none!important; }
}
html[data-animations="off"] *,html[data-animations="off"] *::before,html[data-animations="off"] *::after { animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important; }
.btn.is-busy { position:relative;pointer-events:none;opacity:.76; }
.btn.is-busy::after { content:"";width:13px;height:13px;margin-left:7px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .75s linear infinite; }
html[data-animations="off"] .btn.is-busy::after { animation:none;border-right-color:currentColor; }
.table-actions { display:flex;justify-content:flex-end;gap:6px; }

/* HostGator Shared v2.1 additions */
.auth-page{display:grid;place-items:center;min-height:100vh;padding:24px}.auth-shell{width:min(440px,100%)}.auth-card{padding:28px;border:1px solid var(--line);border-radius:26px;background:var(--surface-solid);box-shadow:var(--shadow-lg)}.auth-logo{width:64px;height:64px;margin-bottom:18px}.auth-card h1{margin:0;font-size:32px;letter-spacing:-.05em}.auth-card>p{color:var(--muted);margin:5px 0 22px}.auth-card form{display:grid;gap:14px}.auth-card .btn{width:100%}.stack{display:flex;gap:10px;flex-wrap:wrap}.muted,small{color:var(--muted)}.toolbar,.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-form input{min-width:160px}.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted)}.command-backdrop{position:fixed;inset:0;z-index:120;display:none;place-items:start center;padding-top:10vh;background:rgba(20,16,18,.36);backdrop-filter:blur(10px)}.command-backdrop.open{display:grid}.command-panel{width:min(620px,calc(100vw - 28px));border:1px solid var(--line);border-radius:20px;background:var(--surface-solid);box-shadow:var(--shadow-lg);overflow:hidden}.command-search{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--line)}.command-search input{border:0;background:transparent;width:100%;outline:0}.command-list{padding:8px}.command-item{display:block;padding:12px 14px;border-radius:12px}.command-item:hover{background:var(--brand-soft)}.flash{margin:0 auto 12px;max-width:1560px}.flash button{margin-left:auto;border:0;background:transparent;color:inherit;font-size:20px}.status{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:720;background:var(--surface-2);white-space:nowrap}.tone-success{color:var(--success);background:var(--success-soft)}.tone-warning{color:var(--warning);background:var(--warning-soft)}.tone-danger{color:var(--danger);background:var(--danger-soft)}.tone-info{color:var(--info);background:var(--info-soft)}.tone-neutral{color:var(--muted)}table{width:100%;border-collapse:collapse}th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);white-space:nowrap}tbody tr:last-child td{border-bottom:0}input,select,textarea{width:100%;min-height:42px;border:1px solid var(--line);border-radius:11px;background:var(--surface-solid);padding:9px 11px;outline:none;transition:border-color .2s,box-shadow .2s}textarea{min-height:90px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:0 0 0 3px var(--brand-soft)}label>input[type=checkbox]{width:auto;min-height:auto;margin-right:7px}.dialog-head button{border:0;background:transparent;font-size:24px;color:var(--muted)}hr{border:0;border-top:1px solid var(--line);margin:20px 0}
@media(max-width:760px){.search-trigger{min-width:0;width:42px;padding:10px}.search-trigger span,.search-trigger kbd{display:none}.grid-4,.grid-3,.grid-2,.form-grid{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.page-actions{justify-content:flex-start}.table-wrap{border:0;background:transparent;overflow:visible}.table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block}.table-wrap thead{display:none}.table-wrap tr{margin-bottom:11px;border:1px solid var(--line);border-radius:15px;background:var(--surface-solid);padding:9px 12px;box-shadow:var(--shadow-sm)}.table-wrap td{border:0;padding:6px 2px}.table-wrap td::before{content:attr(data-label);display:block;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.inline-form{align-items:stretch}.inline-form>*{width:100%}}

/* ==========================================================================
   Cordelia Control · HOTFIX Login centrado
   Evita que las reglas históricas de auth-shell de dos columnas interfieran
   con la pantalla de acceso administrativa de una sola tarjeta.
   ========================================================================== */
body.auth-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-page .auth-shell {
  display: block;
  grid-template-columns: none;
  width: min(440px, 100%);
  min-height: auto;
  margin: 0 auto;
}

.auth-page .auth-card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 30px;
}

.auth-page .auth-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
}

.auth-page .auth-card h1,
.auth-page .auth-card > p {
  text-align: center;
}

.auth-page .auth-card form {
  width: 100%;
}

@media (max-width: 520px) {
  body.auth-page {
    padding: 16px;
  }

  .auth-page .auth-card {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .auth-page .auth-card h1 {
    font-size: 28px;
  }
}

/* ==========================================================================
   Cordelia 9.8B · Rendimiento + identidad visual
   Conserva la familia índigo/violeta de Cordelia sin usar blur permanente.
   ========================================================================== */
body::before {
  display: none;
}

/* Superficies estáticas: conservan identidad Cordelia sin backdrop-filter. */
.sidebar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand) 7%, var(--surface-solid)) 0%,
      var(--surface-solid) 28%,
      color-mix(in srgb, var(--brand-2) 5%, var(--surface-solid)) 100%
    );
}

.topbar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--brand) 6%, var(--surface-solid)),
      color-mix(in srgb, var(--brand-2) 4%, var(--surface-solid)) 55%,
      var(--surface-solid)
    );
}

.sticky-form-actions {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background:
    linear-gradient(
      110deg,
      color-mix(in srgb, var(--brand) 5%, var(--surface-solid)),
      var(--surface-solid)
    );
}

/* Pequeña línea de identidad que no requiere repintado costoso. */
.sidebar {
  border-right-color: color-mix(in srgb, var(--brand) 16%, var(--line));
}
.topbar {
  border-bottom-color: color-mix(in srgb, var(--brand) 12%, var(--line));
}

@media (pointer: fine) {
  [data-reveal] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* Cordelia 9.8B · Guardia final de identidad cromática */
:root {
  --brand:#a95362;
  --brand-2:#d87869;
  --brand-3:#7d70c8;
  --brand-strong:#7f3f4e;
  --brand-soft:rgba(169,83,98,.12);
  --accent:#d87869;
  --info:#7d70c8;
  --info-soft:rgba(125,112,200,.12);
}
html[data-theme="dark"] {
  --brand:#e18a98;
  --brand-2:#ee9a7e;
  --brand-3:#a99bff;
  --brand-strong:#f0a0ad;
  --brand-soft:rgba(225,138,152,.15);
  --accent:#ee9a7e;
  --info:#a99bff;
  --info-soft:rgba(169,155,255,.14);
}


/* ========================================================================== 
   Cordelia 9.8B-UX · Navegación universal + Centro de atención + Dashboard
   ========================================================================== */
.sidebar-toggle { display:grid; flex:0 0 auto; }
.nav-scrim { display:none; position:fixed; inset:0; z-index:25; border:0; background:rgba(30,21,25,.42); }

@media (min-width:901px) {
  html[data-sidebar="collapsed"] .sidebar { transform:translateX(calc(-100% - 18px)); }
  html[data-sidebar="collapsed"] .main-area { margin-left:0; padding-left:20px; }
  html[data-sidebar="collapsed"] .topbar { margin-left:0; }
  .sidebar,.main-area { transition:transform .24s var(--ease),margin-left .24s var(--ease),padding-left .24s var(--ease); }
}
@media (max-width:900px) {
  body.nav-open { overflow:hidden; }
  body.nav-open .nav-scrim { display:block; }
  body.nav-open::after { display:none!important; }
}

.notification-button { position:relative; }
.notification-count {
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center; border:2px solid var(--surface-solid); border-radius:999px;
  background:var(--danger); color:#fff; font-size:9px; font-weight:900; line-height:1;
}
.notification-count[hidden] { display:none; }
.notification-backdrop { position:fixed; inset:0; z-index:110; display:none; background:rgba(30,21,25,.34); }
.notification-backdrop.open { display:block; }
.notification-drawer {
  position:absolute; top:0; right:0; width:min(420px,calc(100vw - 20px)); height:100%;
  display:flex; flex-direction:column; background:var(--surface-solid); border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg); animation:notification-in .22s var(--ease) both;
}
@keyframes notification-in { from { transform:translateX(18px); opacity:.6; } to { transform:none; opacity:1; } }
.notification-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:22px 20px 16px; border-bottom:1px solid var(--line); }
.notification-head h2 { margin:4px 0 0; font-size:20px; letter-spacing:-.035em; }
.eyebrow { color:var(--brand); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.notification-body { flex:1; min-height:0; overflow:auto; padding:10px; }
.notification-item { display:grid; grid-template-columns:10px 1fr; gap:11px; padding:13px 12px; border-radius:13px; }
.notification-item:hover { background:var(--brand-soft); }
.notification-item strong,.notification-item p,.notification-item small { display:block; }
.notification-item p { margin:4px 0 2px; color:var(--text); font-size:13px; }
.notification-item small { color:var(--muted); font-size:11px; }
.notification-mark,.attention-dot { width:8px; height:8px; margin-top:5px; border-radius:50%; background:var(--neutral); }
.severity-danger .notification-mark,.attention-row.severity-danger .attention-dot { background:var(--danger); box-shadow:0 0 0 4px var(--danger-soft); }
.severity-warning .notification-mark,.attention-row.severity-warning .attention-dot { background:var(--warning); box-shadow:0 0 0 4px var(--warning-soft); }
.severity-info .notification-mark,.attention-row.severity-info .attention-dot { background:var(--info); box-shadow:0 0 0 4px var(--info-soft); }
.notification-footer { display:flex; gap:8px; flex-wrap:wrap; padding:14px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.notification-footer .btn { flex:1; }
.attention-empty { min-height:280px; display:grid; place-items:center; align-content:center; text-align:center; padding:30px; }
.attention-empty strong { margin-top:10px; }
.attention-empty p { margin:6px 0 0; color:var(--muted); }
.attention-ok { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; background:var(--success-soft); color:var(--success); font-size:22px; font-weight:900; }
body.attention-open { overflow:hidden; }

.dashboard-home { display:grid; gap:16px; }
.dashboard-statusbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:4px 2px; }
.dashboard-statusbar strong { display:block; margin-top:4px; font-size:16px; }
.dashboard-system-state { display:flex; align-items:center; gap:10px; color:var(--muted); }
.dashboard-system-state small { white-space:nowrap; }
.attention-banner {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--warning) 28%,var(--line)); border-radius:15px;
  background:linear-gradient(105deg,var(--warning-soft),var(--surface-solid) 60%);
}
.attention-banner.is-clear { grid-template-columns:auto 1fr; border-color:color-mix(in srgb,var(--success) 22%,var(--line)); background:linear-gradient(105deg,var(--success-soft),var(--surface-solid) 60%); }
.attention-banner-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:var(--warning); background:color-mix(in srgb,var(--warning) 12%,var(--surface-solid)); font-weight:900; }
.attention-banner.is-clear .attention-banner-icon { color:var(--success); background:var(--success-soft); }
.attention-banner strong { display:block; }
.attention-banner p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.dashboard-kpis .kpi { min-height:132px; }
.kpi-link { color:inherit; }
.kpi-link:hover { border-color:color-mix(in srgb,var(--brand) 26%,var(--line)); box-shadow:var(--shadow-md); }
.kpi-link.needs-attention { border-color:color-mix(in srgb,var(--warning) 30%,var(--line)); }
.kpi-meta { justify-content:space-between; flex-wrap:wrap; }
.kpi-note { color:var(--warning); font-weight:750; }
.dashboard-primary { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr); gap:16px; align-items:start; }
.dashboard-panel { min-height:300px; }
.dashboard-list-body { padding-top:12px; }
.on-shift-list,.attention-list,.activity-list { display:grid; }
.person-live { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 2px; border-bottom:1px solid var(--line); }
.person-live:last-child,.attention-row:last-child,.activity-row:last-child { border-bottom:0; }
.person-live:hover strong { color:var(--brand); }
.person-live-main strong,.person-live-main span,.person-live-time strong,.person-live-time span { display:block; }
.person-live-main span,.person-live-time span { margin-top:3px; color:var(--muted); font-size:11px; }
.person-live-time { text-align:right; white-space:nowrap; }
.person-live-time strong { font-size:15px; }
.attention-row { display:grid; grid-template-columns:10px 1fr; gap:11px; padding:12px 2px; border-bottom:1px solid var(--line); }
.attention-row p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.attention-row:hover strong { color:var(--brand); }
.dashboard-activity { min-height:0; }
.activity-row { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 2px; border-bottom:1px solid var(--line); }
.activity-row time { color:var(--muted); font-variant-numeric:tabular-nums; }
.dashboard-shortcuts { display:flex; gap:16px; flex-wrap:wrap; padding:2px; color:var(--brand); font-size:12px; font-weight:750; }
.dashboard-shortcuts a:hover { text-decoration:underline; }
.empty-state.compact { min-height:160px; display:grid; align-content:center; justify-items:center; text-align:center; padding:20px; }
.empty-state.compact p { margin:5px 0 0; color:var(--muted); font-size:12px; }
tr:target { outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent); outline-offset:-2px; background:var(--brand-soft); }

@media (max-width:1050px) {
  .dashboard-primary { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .dashboard-statusbar { align-items:flex-start; flex-direction:column; }
  .dashboard-system-state { width:100%; justify-content:space-between; }
  .attention-banner { grid-template-columns:auto 1fr; }
  .attention-banner .btn { grid-column:1/-1; width:100%; }
  .notification-drawer { width:100%; }
}
@media (max-width:520px) {
  .dashboard-system-state small { white-space:normal; text-align:right; }
  .activity-row { grid-template-columns:48px minmax(0,1fr) auto; gap:8px; }
  .topbar-actions .search-trigger { display:none; }
}


/* ========================================================================== 
   Cordelia 9.8B-UX · Personal
   Directorio ligero + ficha progresiva
   ========================================================================== */
.people-directory,.employee-profile { display:grid; gap:16px; }
.people-head { margin-bottom:0; }
.people-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.people-stat { min-width:0; padding:13px 15px; display:flex; align-items:baseline; gap:9px; text-align:left; color:var(--text); border:1px solid var(--line); border-radius:14px; background:var(--surface-solid); box-shadow:var(--shadow-sm); cursor:pointer; transition:border-color .18s var(--ease),transform .18s var(--ease),background .18s var(--ease); }
.people-stat:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--brand) 28%,var(--line)); }
.people-stat.active { border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); background:var(--brand-soft); }
.people-stat.needs-attention strong { color:var(--warning); }
.people-stat.is-total { cursor:default; }
.people-stat.is-total:hover { transform:none; border-color:var(--line); }
.people-stat strong { font-size:22px; letter-spacing:-.04em; }
.people-stat span { color:var(--muted); font-size:11px; font-weight:750; }
.people-toolbar-card { overflow:visible; }
.people-toolbar { display:grid; gap:12px; }
.people-search { height:46px; display:flex; align-items:center; gap:10px; padding:0 13px; border:1px solid var(--line); border-radius:13px; background:var(--surface-solid); }
.people-search:focus-within { border-color:color-mix(in srgb,var(--brand) 45%,var(--line)); box-shadow:0 0 0 3px var(--brand-soft); }
.people-search .icon { width:17px; color:var(--muted); }
.people-search input { width:100%; height:100%; border:0; outline:0; background:transparent; color:var(--text); font:inherit; box-shadow:none!important; }
.people-filters { display:flex; gap:7px; flex-wrap:wrap; }
.filter-chip { min-height:34px; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface-solid); color:var(--muted); font-size:11px; font-weight:800; cursor:pointer; }
.filter-chip:hover,.filter-chip.active { color:var(--brand-strong); border-color:color-mix(in srgb,var(--brand) 35%,var(--line)); background:var(--brand-soft); }
.people-result-line { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; }
.people-list { display:grid; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface-solid); box-shadow:var(--shadow-sm); }
.person-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto 18px; gap:13px; align-items:center; min-height:76px; padding:12px 16px; color:var(--text); border-bottom:1px solid var(--line); transition:background .16s var(--ease); }
.person-row:last-child { border-bottom:0; }
.person-row:hover { background:linear-gradient(90deg,var(--brand-soft),transparent 70%); }
.person-row[hidden] { display:none!important; }
.person-avatar { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 18%,var(--surface-solid)),color-mix(in srgb,var(--brand-2) 17%,var(--surface-solid))); color:var(--brand-strong); border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line)); font-weight:900; letter-spacing:-.02em; }
.person-avatar.is-large { width:64px; height:64px; border-radius:19px; font-size:19px; }
.person-row-main strong,.person-row-main span,.person-row-meta small { display:block; }
.person-row-main strong { font-size:14px; }
.person-row-main span { margin-top:4px; color:var(--muted); font-size:11px; }
.person-row-meta { min-width:220px; text-align:right; }
.person-row-meta small { margin-bottom:6px; color:var(--muted); }
.person-badges { display:flex; justify-content:flex-end; gap:5px; flex-wrap:wrap; }
.person-row-arrow { color:var(--muted); font-size:24px; line-height:1; }
.person-empty { border:1px dashed var(--line-strong); border-radius:18px; background:var(--surface-solid); }
.profile-pending-note { display:flex; align-items:flex-start; gap:11px; margin:16px 0 0; padding:12px 13px; border:1px solid color-mix(in srgb,var(--warning) 28%,var(--line)); border-radius:13px; background:var(--warning-soft); }
.profile-pending-note > span { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb,var(--warning) 18%,var(--surface-solid)); color:var(--warning); font-weight:900; }
.profile-pending-note strong,.profile-pending-note p { display:block; }
.profile-pending-note p { margin:3px 0 0; color:var(--muted); font-size:11px; }

.profile-back { width:max-content; color:var(--muted); font-size:12px; font-weight:800; }
.profile-back:hover { color:var(--brand); }
.employee-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 8%,var(--surface-solid)),var(--surface-solid) 55%); box-shadow:var(--shadow-sm); }
.employee-hero-main { display:flex; align-items:center; gap:15px; min-width:0; }
.employee-title-line { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.employee-title-line h2 { margin:0; font-size:24px; letter-spacing:-.045em; }
.employee-hero-main p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.employee-hero-badges { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.employee-hero-badges > span:not(.status) { color:var(--muted); font-size:11px; font-weight:750; }
.employee-hero-actions { display:flex; gap:8px; flex-wrap:wrap; }
.employee-profile-alert { margin:0; }
.profile-tabs { display:flex; gap:5px; overflow:auto; padding:4px; border:1px solid var(--line); border-radius:14px; background:var(--surface-solid); scrollbar-width:none; }
.profile-tabs::-webkit-scrollbar { display:none; }
.profile-tabs a { flex:0 0 auto; padding:8px 11px; border-radius:10px; color:var(--muted); font-size:11px; font-weight:800; white-space:nowrap; }
.profile-tabs a:hover { color:var(--brand); background:var(--brand-soft); }
.profile-tabs a.active { color:var(--surface-solid); background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
.profile-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.profile-summary-grid.single-focus { grid-template-columns:minmax(0,560px); }
.profile-summary-card { min-height:220px; }
.text-link { color:var(--brand); font-size:11px; font-weight:800; }
.text-link:hover { text-decoration:underline; }
.profile-data-list { display:grid; }
.profile-data-list > div { display:grid; grid-template-columns:minmax(100px,.8fr) minmax(0,1.3fr); gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.profile-data-list > div:last-child { border-bottom:0; }
.profile-data-list span { color:var(--muted); font-size:11px; }
.profile-data-list strong { min-width:0; overflow-wrap:anywhere; font-size:12px; text-align:right; }
.profile-data-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.field-span { grid-column:1/-1; }
.option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 18px; margin-top:16px; }
.option-grid label { display:flex; align-items:center; gap:8px; min-height:34px; }
.profile-highlight { display:grid; gap:5px; }
.profile-highlight span,.profile-highlight small { color:var(--muted); }
.profile-highlight strong { font-size:18px; letter-spacing:-.025em; }
.k4-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.k4-facts > div { padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--bg); }
.k4-facts span,.k4-facts strong { display:block; }
.k4-facts span { color:var(--muted); font-size:10px; }
.k4-facts strong { margin-top:5px; font-size:14px; }
.inline-settings-form { display:flex; align-items:end; gap:8px; }
.inline-settings-form .field { flex:1; }

@media (max-width:900px) {
  .people-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .person-row { grid-template-columns:auto minmax(0,1fr) 18px; }
  .person-row-meta { grid-column:2; min-width:0; text-align:left; }
  .person-badges { justify-content:flex-start; }
  .person-row-arrow { grid-column:3; grid-row:1/3; }
  .employee-hero { align-items:flex-start; flex-direction:column; }
  .employee-hero-actions { width:100%; }
  .profile-summary-grid,.profile-data-columns { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .people-head { align-items:stretch; }
  .people-head .btn { width:100%; }
  .people-stats { gap:7px; }
  .people-stat { padding:10px 11px; align-items:flex-start; flex-direction:column; gap:2px; }
  .people-stat strong { font-size:19px; }
  .people-result-line { align-items:flex-start; flex-direction:column; }
  .person-row { padding:12px; }
  .person-row-meta small { display:none; }
  .employee-hero { padding:15px; }
  .employee-hero-main { align-items:flex-start; }
  .person-avatar.is-large { width:52px; height:52px; border-radius:16px; }
  .employee-title-line h2 { font-size:20px; }
  .employee-hero-actions .btn { flex:1; }
  .profile-tabs { margin-left:-2px; margin-right:-2px; }
  .profile-data-list > div { grid-template-columns:1fr; gap:4px; }
  .profile-data-list strong { text-align:left; }
  .option-grid,.k4-facts { grid-template-columns:1fr; }
  .inline-settings-form { align-items:stretch; flex-direction:column; }
  .inline-settings-form .btn { width:100%; }
}


/* ========================================================================== 
   Cordelia 9.8B-UX · Asistencia
   Resumen operativo + detalle explicable de jornada
   ========================================================================== */
.attendance-directory,.attendance-detail { display:grid; gap:16px; }
.attendance-head { margin-bottom:0; }
.attendance-date-nav { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.attendance-date-form { display:flex; }
.attendance-date-picker { height:36px; min-width:42px; display:flex; align-items:center; gap:7px; padding:0 9px; border:1px solid var(--line); border-radius:10px; background:var(--surface-solid); color:var(--muted); cursor:pointer; }
.attendance-date-picker .icon { width:15px; }
.attendance-date-picker input { width:124px; border:0; padding:0; background:transparent; color:var(--text); box-shadow:none!important; font-size:11px; }
.attendance-closed-banner { margin:0; }
.attendance-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.attendance-stat { min-width:0; padding:13px 15px; display:flex; align-items:baseline; gap:9px; text-align:left; color:var(--text); border:1px solid var(--line); border-radius:14px; background:var(--surface-solid); box-shadow:var(--shadow-sm); cursor:pointer; transition:border-color .18s var(--ease),transform .18s var(--ease),background .18s var(--ease); }
.attendance-stat:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--brand) 28%,var(--line)); }
.attendance-stat.active { border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); background:var(--brand-soft); }
.attendance-stat.needs-attention strong { color:var(--warning); }
.attendance-stat strong { font-size:22px; letter-spacing:-.04em; }
.attendance-stat span { color:var(--muted); font-size:11px; font-weight:750; }
.attendance-toolbar-card { overflow:visible; }
.attendance-toolbar { display:grid; gap:12px; }
.attendance-more { border-top:1px solid var(--line); padding-top:9px; }
.attendance-more summary { width:max-content; color:var(--muted); font-size:11px; font-weight:800; cursor:pointer; list-style:none; }
.attendance-more summary::-webkit-details-marker { display:none; }
.attendance-more summary::after { content:' +'; color:var(--brand); }
.attendance-more[open] summary::after { content:' −'; }
.attendance-more .people-filters { margin-top:9px; }
.attendance-list { display:grid; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface-solid); box-shadow:var(--shadow-sm); }
.attendance-row { display:grid; grid-template-columns:auto minmax(190px,1.35fr) minmax(130px,.7fr) minmax(150px,.75fr) minmax(155px,.8fr) 18px; gap:14px; align-items:center; min-height:86px; padding:13px 16px; color:var(--text); border-bottom:1px solid var(--line); transition:background .16s var(--ease); }
.attendance-row:last-child { border-bottom:0; }
.attendance-row:hover { background:linear-gradient(90deg,var(--brand-soft),transparent 72%); }
.attendance-row[hidden] { display:none!important; }
.attendance-person strong,.attendance-person span,.attendance-person small,.attendance-duration small,.attendance-duration strong,.attendance-duration span,.attendance-state-note { display:block; }
.attendance-person strong { font-size:14px; }
.attendance-person span { margin-top:4px; color:var(--muted); font-size:11px; }
.attendance-person small { margin-top:3px; color:var(--muted); font-size:9px; }
.attendance-times { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.attendance-times > span { padding:8px 9px; border:1px solid var(--line); border-radius:11px; background:var(--bg); }
.attendance-times small,.attendance-duration small { display:block; color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.attendance-times strong { display:block; margin-top:3px; font-size:14px; font-variant-numeric:tabular-nums; }
.attendance-duration strong { margin-top:3px; font-size:15px; font-variant-numeric:tabular-nums; }
.attendance-duration span { margin-top:3px; color:var(--muted); font-size:10px; }
.attendance-state { text-align:right; }
.attendance-state-note { margin-top:5px; color:var(--muted); font-size:9px; }
.attendance-empty { border:1px dashed var(--line-strong); border-radius:18px; background:var(--surface-solid); }
.attendance-footnote { display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:10px; }
.attendance-footnote span::before { content:'•'; margin-right:6px; color:var(--brand); }

.attendance-detail-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 8%,var(--surface-solid)),var(--surface-solid) 58%); box-shadow:var(--shadow-sm); }
.attendance-detail-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.attendance-review-banner { margin:0; }
.attendance-detail-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.attendance-detail-kpis section { padding:14px 15px; border:1px solid var(--line); border-radius:14px; background:var(--surface-solid); box-shadow:var(--shadow-sm); }
.attendance-detail-kpis span,.attendance-detail-kpis strong,.attendance-detail-kpis small { display:block; }
.attendance-detail-kpis span { color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.attendance-detail-kpis strong { margin-top:6px; font-size:21px; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.attendance-detail-kpis small { margin-top:4px; color:var(--muted); font-size:10px; }
.attendance-progress-copy { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.attendance-progress-copy strong { font-size:26px; letter-spacing:-.045em; }
.attendance-progress-copy span { color:var(--muted); font-size:11px; font-weight:750; }
.attendance-progress { position:relative; height:12px; margin-top:14px; overflow:visible; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); }
.attendance-progress-fill { position:absolute; inset:0 auto 0 0; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); }
.attendance-progress-half { position:absolute; top:-5px; bottom:-5px; left:50%; width:2px; border-radius:99px; background:color-mix(in srgb,var(--text) 35%,transparent); }
.attendance-progress-labels { display:flex; justify-content:space-between; gap:10px; margin-top:8px; color:var(--muted); font-size:9px; }
.attendance-progress-notes { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:15px; color:var(--muted); font-size:10px; }
.attendance-progress-notes .is-additional { color:var(--warning); font-weight:750; }
.attendance-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.punch-timeline { display:grid; padding:4px 18px 10px; }
.punch-event { position:relative; display:grid; grid-template-columns:14px 56px 46px minmax(0,1fr); gap:9px; align-items:center; min-height:48px; border-bottom:1px solid var(--line); }
.punch-event:last-child { border-bottom:0; }
.punch-dot { width:9px; height:9px; border-radius:50%; background:var(--neutral); }
.punch-dot.is-ent { background:var(--success); box-shadow:0 0 0 4px var(--success-soft); }
.punch-dot.is-sal { background:var(--info); box-shadow:0 0 0 4px var(--info-soft); }
.punch-event time { font-variant-numeric:tabular-nums; font-weight:850; }
.punch-event strong { font-size:10px; }
.punch-event small { color:var(--muted); text-align:right; }
.continuity-list { margin-top:17px; padding-top:14px; border-top:1px solid var(--line); }
.continuity-list h4 { margin:0 0 8px; font-size:12px; }
.continuity-event { display:grid; grid-template-columns:24px 1fr; gap:9px; padding:8px 0; }
.continuity-event > span { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:var(--success-soft); color:var(--success); font-weight:900; }
.continuity-event strong { font-size:11px; }
.continuity-event p { margin:3px 0 0; color:var(--muted); font-size:10px; }
.attendance-issue-list,.admin-adjustment-list { display:grid; }
.attendance-issue { display:grid; grid-template-columns:10px minmax(0,1fr); gap:11px; padding:11px 0; border-bottom:1px solid var(--line); }
.attendance-issue:last-child { border-bottom:0; }
.attendance-issue p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.admin-adjustment-list > div { display:grid; grid-template-columns:minmax(150px,.7fr) minmax(0,1.5fr) auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }
.admin-adjustment-list > div:last-child { border-bottom:0; }
.admin-adjustment-list strong { font-size:11px; }
.admin-adjustment-list span,.admin-adjustment-list small { color:var(--muted); font-size:10px; }
.admin-adjustment-list small { text-align:right; }

@media (max-width:1100px) {
  .attendance-row { grid-template-columns:auto minmax(180px,1.2fr) minmax(130px,.7fr) minmax(140px,.7fr) 18px; }
  .attendance-state { grid-column:2/5; text-align:left; display:flex; align-items:center; gap:8px; }
  .attendance-state-note { margin-top:0; }
}
@media (max-width:900px) {
  .attendance-stats,.attendance-detail-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .attendance-row { grid-template-columns:auto minmax(0,1fr) 18px; gap:11px; }
  .attendance-row .attendance-times,.attendance-row .attendance-duration,.attendance-row .attendance-state { grid-column:2; }
  .attendance-row .person-row-arrow { grid-column:3; grid-row:1/5; align-self:center; }
  .attendance-times { max-width:260px; }
  .attendance-state { display:flex; align-items:center; gap:8px; }
  .attendance-detail-hero { align-items:flex-start; flex-direction:column; }
  .attendance-detail-actions { width:100%; }
  .attendance-detail-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .attendance-head { align-items:stretch; }
  .attendance-date-nav { width:100%; }
  .attendance-date-form { margin-left:auto; }
  .attendance-date-picker input { width:108px; }
  .attendance-stats { gap:7px; }
  .attendance-stat { padding:10px 11px; align-items:flex-start; flex-direction:column; gap:2px; }
  .attendance-stat strong { font-size:19px; }
  .attendance-primary-filters { flex-wrap:nowrap; overflow:auto; margin-left:-2px; margin-right:-2px; padding-bottom:2px; scrollbar-width:none; }
  .attendance-primary-filters::-webkit-scrollbar { display:none; }
  .attendance-row { padding:13px 12px; }
  .attendance-avatar { align-self:start; }
  .attendance-person small { display:none; }
  .attendance-times { max-width:none; }
  .attendance-duration { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .attendance-duration small { width:100%; }
  .attendance-duration span { margin-top:0; }
  .attendance-detail-hero { padding:15px; }
  .attendance-detail-actions .btn { flex:1; }
  .attendance-detail-kpis { gap:7px; }
  .attendance-detail-kpis section { padding:11px 12px; }
  .attendance-detail-kpis strong { font-size:18px; }
  .attendance-progress-copy { align-items:flex-start; flex-direction:column; }
  .attendance-progress-labels { font-size:8px; }
  .punch-event { grid-template-columns:12px 48px 40px 1fr; gap:7px; padding-right:5px; }
  .admin-adjustment-list > div { grid-template-columns:1fr; gap:4px; }
  .admin-adjustment-list small { text-align:left; }
}

/* ==========================================================================
   Cordelia 9.8B UX · Incidencias / Atención y conciliación
   ========================================================================== */
.incidents-workbench { display:grid; gap:15px; }
.incident-status-tabs { display:flex; gap:5px; width:max-content; max-width:100%; overflow:auto; padding:4px; border:1px solid var(--line); border-radius:14px; background:var(--surface-solid); box-shadow:var(--shadow-sm); scrollbar-width:none; }
.incident-status-tabs::-webkit-scrollbar { display:none; }
.incident-status-tabs a { display:flex; align-items:center; gap:8px; min-height:34px; padding:0 12px; border-radius:10px; color:var(--muted); font-size:11px; font-weight:800; white-space:nowrap; }
.incident-status-tabs a:hover,.incident-status-tabs a.active { color:var(--text); background:var(--brand-soft); }
.incident-status-tabs a.active { color:var(--brand-strong); }
.incident-status-tabs span { display:grid; min-width:19px; height:19px; place-items:center; padding:0 5px; border-radius:999px; background:var(--bg-2); color:var(--muted); font-size:9px; }
.incident-status-tabs a.active span { background:var(--surface-solid); color:var(--brand); }
.incident-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.incident-stat { display:flex; align-items:center; justify-content:space-between; gap:9px; min-height:56px; padding:11px 14px; border:1px solid var(--line); border-radius:15px; background:var(--surface-solid); color:var(--text); text-align:left; cursor:pointer; box-shadow:var(--shadow-sm); }
.incident-stat:hover,.incident-stat.active { border-color:color-mix(in srgb,var(--brand) 26%,var(--line)); background:linear-gradient(110deg,var(--brand-soft),var(--surface-solid)); }
.incident-stat.needs-attention strong { color:var(--danger); }
.incident-stat strong { font-size:22px; letter-spacing:-.04em; }
.incident-stat span { color:var(--muted); font-size:10px; font-weight:800; }
.incident-toolbar-card { overflow:visible; }
.incident-toolbar { display:grid; gap:11px; }
.incident-primary-filters { flex-wrap:wrap; }
.incident-list { display:grid; gap:9px; }
.incident-card { position:relative; display:grid; grid-template-columns:5px minmax(0,1fr) auto; gap:14px; align-items:stretch; padding:0 15px 0 0; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--surface-solid); color:var(--text); box-shadow:var(--shadow-sm); transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease); }
.incident-card:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--brand) 22%,var(--line)); box-shadow:var(--shadow-md); }
.incident-card[hidden] { display:none!important; }
.incident-card-mark { width:5px; background:var(--neutral); }
.incident-card.severity-danger .incident-card-mark { background:var(--danger); }
.incident-card.severity-warning .incident-card-mark { background:var(--warning); }
.incident-card.severity-neutral .incident-card-mark { background:var(--neutral); }
.incident-card-main { min-width:0; padding:14px 0; }
.incident-card-title { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.incident-card-title > div:first-child { min-width:0; }
.incident-card-title .eyebrow { display:block; margin-bottom:4px; color:var(--muted); font-size:9px; }
.incident-card-title strong { display:block; overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.incident-card-badges { display:flex; justify-content:flex-end; gap:5px; flex-wrap:wrap; }
.incident-card-main > p { margin:7px 0 9px; color:var(--muted); font-size:10px; line-height:1.45; }
.incident-card-meta { display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:9px; font-weight:700; }
.incident-card-meta span + span::before { content:'•'; margin-right:10px; color:var(--brand); }
.incident-card-resolution { margin-top:9px; padding-top:9px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; line-height:1.45; }
.incident-card-resolution strong { color:var(--text); }
.incident-card-action { align-self:center; min-width:108px; color:var(--brand); font-size:10px; font-weight:850; text-align:right; }
.incident-empty { margin-top:2px; }

.incident-detail { display:grid; gap:15px; }
.incident-detail-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 7%,var(--surface-solid)),var(--surface-solid) 60%); box-shadow:var(--shadow-sm); }
.incident-title-line { display:flex; gap:13px; align-items:center; }
.incident-title-line h2 { margin:1px 0 3px; font-size:24px; letter-spacing:-.04em; }
.incident-title-line p { margin:0; color:var(--muted); font-size:10px; }
.incident-symbol { display:grid; width:42px; height:42px; flex:0 0 auto; place-items:center; border-radius:14px; font-size:18px; font-weight:950; background:var(--bg-2); color:var(--neutral); }
.incident-symbol.severity-danger { color:var(--danger); background:var(--danger-soft); }
.incident-symbol.severity-warning { color:var(--warning); background:var(--warning-soft); }
.incident-hero-badges { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px; padding-left:55px; }
.incident-hero-badges > span:not(.status) { color:var(--muted); font-size:9px; font-weight:750; }
.incident-detail-actions { display:flex; gap:7px; flex-wrap:wrap; }
.incident-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:15px; }
.incident-explanation { margin-bottom:13px; padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:var(--bg); }
.incident-explanation strong { font-size:12px; }
.incident-explanation p { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
.profile-data-list.compact > div { min-height:34px; }
.incident-punches { max-width:680px; }
.incident-resolution-card { border-color:color-mix(in srgb,var(--brand) 15%,var(--line)); }
.incident-resolution-card form { display:grid; gap:14px; }
.incident-conditional[hidden],.incident-confirm-step[hidden] { display:none!important; }
.incident-result-preview { display:grid; gap:5px; padding:13px 14px; border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line)); border-radius:14px; background:linear-gradient(110deg,var(--brand-soft),transparent); }
.incident-result-preview span { color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.incident-result-preview strong { font-size:11px; line-height:1.5; }
.incident-result-preview small { color:var(--muted); font-size:9px; }
.incident-confirm-step { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:end; margin-top:2px; padding:15px 16px; border:1px solid color-mix(in srgb,var(--warning) 28%,var(--line)); border-radius:15px; background:var(--warning-soft); }
.incident-confirm-step h4 { margin:3px 0 5px; font-size:14px; }
.incident-confirm-step p { margin:0; color:var(--muted); font-size:10px; }
.incident-confirm-step ul { margin:9px 0 0; padding-left:18px; color:var(--muted); font-size:9px; line-height:1.55; }
.resolution-summary { display:grid; grid-template-columns:34px minmax(0,1fr); gap:11px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--bg); }
.resolution-summary > span { display:grid; width:32px; height:32px; place-items:center; border-radius:10px; background:var(--success-soft); color:var(--success); font-size:16px; font-weight:900; }
.resolution-summary.is-ignored > span { background:var(--bg-2); color:var(--muted); }
.resolution-summary strong { font-size:12px; }
.resolution-summary p { margin:4px 0; color:var(--muted); font-size:10px; line-height:1.5; }
.resolution-summary small { color:var(--muted); font-size:9px; }
.incident-adjustments { margin-top:14px; padding-top:8px; border-top:1px solid var(--line); }

@media (max-width:900px) {
  .incident-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .incident-card { grid-template-columns:5px minmax(0,1fr); padding-right:12px; }
  .incident-card-action { grid-column:2; min-width:0; padding-bottom:13px; text-align:left; }
  .incident-detail-hero { align-items:flex-start; flex-direction:column; }
  .incident-detail-actions { width:100%; }
  .incident-detail-grid { grid-template-columns:1fr; }
  .incident-confirm-step { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .incident-status-tabs { width:100%; }
  .incident-status-tabs a { flex:1; justify-content:center; }
  .incident-stats { gap:7px; }
  .incident-stat { align-items:flex-start; flex-direction:column; gap:1px; padding:10px 11px; }
  .incident-stat strong { font-size:19px; }
  .incident-primary-filters { flex-wrap:nowrap; overflow:auto; padding-bottom:2px; scrollbar-width:none; }
  .incident-primary-filters::-webkit-scrollbar { display:none; }
  .incident-card { gap:10px; }
  .incident-card-main { padding:12px 0 7px; }
  .incident-card-title { display:block; }
  .incident-card-badges { justify-content:flex-start; margin-top:7px; }
  .incident-card-meta span + span::before { margin-right:6px; }
  .incident-card-meta { gap:6px; }
  .incident-detail-hero { padding:15px; }
  .incident-title-line { align-items:flex-start; }
  .incident-title-line h2 { font-size:20px; }
  .incident-hero-badges { padding-left:0; }
  .incident-detail-actions .btn { flex:1; }
  .incident-confirm-step .form-actions { width:100%; }
  .incident-confirm-step .form-actions .btn { flex:1; }
}


/* ===== FASE 9.8B UX · NÓMINA ===== */
.payroll-home,.payroll-period-detail,.payroll-item-detail,.payroll-new{display:grid;gap:18px}
.back-link{display:inline-flex;margin-bottom:7px;font-size:.82rem;font-weight:750;color:var(--muted);text-decoration:none}.back-link:hover{color:var(--brand)}
.payroll-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.payroll-overview-item{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .18s ease}.payroll-overview-item:hover,.payroll-overview-item.active{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}.payroll-overview-item span{font-size:.78rem;color:var(--muted);font-weight:750;text-transform:uppercase;letter-spacing:.04em}.payroll-overview-item strong{font-size:1.65rem;line-height:1}.payroll-overview-item small{color:var(--muted)}
.payroll-period-tabs{display:flex;gap:8px;overflow:auto;padding-bottom:2px;scrollbar-width:none}.payroll-period-tabs::-webkit-scrollbar{display:none}.payroll-period-tabs .filter-chip{text-decoration:none;white-space:nowrap}
.payroll-period-list{display:grid;gap:12px}.payroll-period-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:inherit;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.payroll-period-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 42%,var(--line));box-shadow:var(--shadow-md)}.payroll-period-main{display:grid;gap:13px}.payroll-period-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.payroll-period-heading h3{margin:2px 0 0;font-size:1.05rem}.payroll-period-facts{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:.84rem}.payroll-period-facts strong{color:var(--text)}.payroll-period-total{min-width:160px;text-align:right;display:grid;gap:4px}.payroll-period-total small,.payroll-period-total span{color:var(--muted)}.payroll-period-total strong{font-size:1.45rem}.payroll-period-total span{font-size:.8rem;font-weight:750;color:var(--brand)}.needs-attention-text{color:var(--warning-text,#9a6619)!important}.payroll-home-footnote{display:flex;flex-wrap:wrap;gap:10px 24px;padding:0 4px;color:var(--muted);font-size:.8rem}
.payroll-new-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr);gap:16px;align-items:start}.payroll-period-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.payroll-period-option{position:relative;display:flex;gap:12px;padding:16px;border:1px solid var(--line);border-radius:16px;cursor:pointer;background:var(--surface-subtle)}.payroll-period-option:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 14%,transparent)}.payroll-period-option input{margin-top:3px}.payroll-period-option span{display:grid;gap:4px}.payroll-period-option small{color:var(--muted);line-height:1.35}.payroll-start-field{margin-top:16px}.payroll-period-preview{display:grid;gap:5px;margin-top:14px;padding:14px 16px;border-radius:15px;background:color-mix(in srgb,var(--brand) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line))}.payroll-period-preview span,.payroll-period-preview small{color:var(--muted)}.payroll-period-preview strong{font-size:1.08rem}.payroll-guide-list{margin:0;padding:0;list-style:none;display:grid;gap:16px}.payroll-guide-list li{display:grid;gap:3px;padding-left:22px;position:relative}.payroll-guide-list li:before{content:'✓';position:absolute;left:0;top:0;color:var(--brand);font-weight:900}.payroll-guide-list span{color:var(--muted);font-size:.84rem;line-height:1.45}
.payroll-period-head{align-items:flex-start}.payroll-flow{display:grid;grid-template-columns:repeat(4,1fr);position:relative;padding:15px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.payroll-flow:before{content:'';position:absolute;left:12.5%;right:12.5%;top:29px;height:2px;background:var(--line)}.payroll-flow-step{z-index:1;display:grid;justify-items:center;gap:6px;color:var(--muted);font-size:.8rem}.payroll-flow-step span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--surface);font-weight:900}.payroll-flow-step.done span,.payroll-flow-step.current span{border-color:var(--brand);background:var(--brand);color:#fff}.payroll-flow-step.current strong{color:var(--text)}
.payroll-period-kpis,.payroll-item-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.payroll-period-kpis section,.payroll-item-kpis section{display:grid;gap:5px;padding:16px 18px;border:1px solid var(--line);border-radius:17px;background:var(--surface)}.payroll-period-kpis section>span,.payroll-item-kpis section>span{font-size:.76rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.035em}.payroll-period-kpis strong,.payroll-item-kpis strong{font-size:1.35rem}.payroll-period-kpis small,.payroll-item-kpis small{color:var(--muted)}.payroll-period-kpis .needs-attention{border-color:color-mix(in srgb,var(--warning) 55%,var(--line));background:color-mix(in srgb,var(--warning) 7%,var(--surface))}.payroll-item-kpis .is-total{border-color:color-mix(in srgb,var(--brand) 42%,var(--line));background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.payroll-attention-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--warning) 48%,var(--line));border-radius:17px;background:color-mix(in srgb,var(--warning) 7%,var(--surface))}.payroll-attention-card.is-clear{border-color:color-mix(in srgb,var(--success) 35%,var(--line));background:color-mix(in srgb,var(--success) 5%,var(--surface))}.payroll-attention-card p{margin:4px 0 0;color:var(--muted)}.payroll-attention-actions{display:flex;gap:8px;flex-wrap:wrap}.payroll-attention-actions form{margin:0}.payroll-paid-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border:1px solid color-mix(in srgb,var(--success) 42%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--success) 6%,var(--surface))}.payroll-paid-card>div{display:flex;align-items:center;gap:14px}.payroll-paid-check{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--success);color:white;font-size:1.25rem;font-weight:900}.payroll-paid-card strong{display:block;font-size:1.35rem;margin:2px 0}.payroll-paid-card p{margin:0;color:var(--muted)}.payroll-paid-card>small{color:var(--muted);max-width:320px;text-align:right}
.payroll-toolbar-card .card-body{padding:14px}.payroll-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) auto;gap:12px 18px;align-items:center}.payroll-toolbar .people-filters{justify-content:flex-end}.payroll-toolbar .people-result-line{grid-column:1/-1}.payroll-employee-list{display:grid;gap:10px}.payroll-employee-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 18px;align-items:center;padding:15px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:inherit;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .16s ease,border-color .16s ease}.payroll-employee-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand) 38%,var(--line))}.payroll-employee-card.has-pending{border-left:3px solid var(--warning)}.payroll-employee-main{display:grid;gap:6px;min-width:0}.payroll-employee-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.payroll-employee-main>small{color:var(--muted)}.payroll-employee-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:3px}.payroll-employee-facts>span{display:grid;gap:2px}.payroll-employee-facts small{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.035em}.payroll-employee-total{display:grid;text-align:right;gap:3px;min-width:145px}.payroll-employee-total small{color:var(--muted)}.payroll-employee-total strong{font-size:1.12rem}.payroll-employee-total span{color:var(--brand);font-size:.78rem;font-weight:750}.positive{color:var(--success)!important}.negative{color:var(--danger)!important}
.payroll-stage-card{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:20px;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--brand) 5%,var(--surface))}.payroll-stage-card h3{margin:4px 0}.payroll-stage-card p{margin:0;color:var(--muted);max-width:680px}.payroll-stage-actions{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;justify-content:flex-end}.payroll-stage-actions form{margin:0}.payroll-approval-checklist{display:grid;gap:3px;font-size:.75rem;color:var(--muted);text-align:right}.payroll-stage-card.is-payment form{display:flex;align-items:flex-end;gap:10px}.payroll-stage-card.is-payment .field{min-width:280px;margin:0}
.payroll-item-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.payroll-breakdown{display:grid;gap:0}.payroll-breakdown>div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--line)}.payroll-breakdown>div:last-child{border-bottom:0}.payroll-breakdown-total{margin-top:5px;padding-top:15px!important;font-size:1.08rem}.payroll-time-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.payroll-time-summary>div{display:grid;gap:4px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--surface-subtle)}.payroll-time-summary span,.payroll-time-summary small{color:var(--muted)}.payroll-time-summary strong{font-size:1rem}.payroll-day-list{display:grid}.payroll-day-row{display:grid;grid-template-columns:minmax(220px,1fr) 110px 110px 150px auto;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}.payroll-day-row:last-child{border-bottom:0}.payroll-day-row:hover{background:var(--surface-subtle)}.payroll-day-row>span{display:grid;gap:3px}.payroll-day-row small{color:var(--muted)}.payroll-adjustments-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.payroll-adjustments-grid details{border:1px solid var(--line);border-radius:15px;background:var(--surface-subtle);overflow:hidden}.payroll-adjustments-grid summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;cursor:pointer;font-weight:750;list-style:none}.payroll-adjustments-grid summary::-webkit-details-marker{display:none}.payroll-adjustments-grid summary:after{content:'+';font-size:1.15rem;color:var(--brand)}.payroll-adjustments-grid details[open] summary:after{content:'−'}.payroll-adjustments-grid summary strong{font-size:.82rem;color:var(--muted)}.payroll-adjustment-body{display:grid;gap:12px;padding:0 15px 15px}.payroll-adjustment-body small{color:var(--muted)}.check-row{display:flex;align-items:flex-start;gap:8px}
@media (max-width:1050px){.payroll-overview,.payroll-period-kpis,.payroll-item-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-new-layout,.payroll-item-columns{grid-template-columns:1fr}.payroll-day-row{grid-template-columns:minmax(180px,1fr) 90px 90px 140px auto}.payroll-toolbar{grid-template-columns:1fr}.payroll-toolbar .people-filters{justify-content:flex-start}.payroll-stage-card{align-items:flex-start;flex-direction:column}.payroll-stage-actions{justify-content:flex-start}.payroll-approval-checklist{text-align:left}}
@media (max-width:700px){.payroll-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-overview-item{padding:13px}.payroll-period-card{grid-template-columns:1fr;padding:16px}.payroll-period-total{text-align:left;min-width:0;border-top:1px solid var(--line);padding-top:12px}.payroll-period-heading{align-items:flex-start}.payroll-period-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.payroll-period-options{grid-template-columns:1fr}.payroll-flow{padding:13px 6px}.payroll-flow:before{left:13%;right:13%;top:27px}.payroll-flow-step strong{font-size:.7rem}.payroll-period-kpis,.payroll-item-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-attention-card,.payroll-paid-card{align-items:flex-start;flex-direction:column}.payroll-paid-card>small{text-align:left}.payroll-toolbar .people-filters{overflow:auto;flex-wrap:nowrap;padding-bottom:3px}.payroll-toolbar .filter-chip{white-space:nowrap}.payroll-employee-card{grid-template-columns:auto minmax(0,1fr);padding:14px}.payroll-employee-total{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:8px;min-width:0}.payroll-employee-total span{margin-left:auto}.payroll-employee-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.payroll-item-kpis section{padding:13px}.payroll-time-summary{grid-template-columns:1fr}.payroll-day-row{grid-template-columns:1fr auto;padding:13px 15px}.payroll-day-row>span:nth-child(2),.payroll-day-row>span:nth-child(3){display:inline-flex;gap:6px;align-items:center}.payroll-day-row>span:nth-child(4){grid-column:1}.payroll-day-row>span:nth-child(5){grid-column:2;grid-row:1}.payroll-adjustments-grid{grid-template-columns:1fr}.payroll-stage-card.is-payment form{width:100%;display:grid}.payroll-stage-card.is-payment .field{min-width:0}.payroll-home-footnote{display:grid;gap:5px}}


/* ========================================================================== 
   Cordelia 9.8B-UX · Sincronización global + Conexiones
   ========================================================================== */
.sync-launcher { position:relative; overflow:visible; }
.sync-launcher .icon,.sync-action .icon,.sync-overview-icon .icon { transform-origin:50% 50%; }
.sync-launcher .sync-state-dot { position:absolute; right:5px; bottom:5px; width:7px; height:7px; border:2px solid var(--surface-solid); border-radius:50%; background:var(--success); }
.sync-launcher.has-warning .sync-state-dot { background:var(--warning); }
.sync-launcher.is-syncing .sync-state-dot { background:var(--info); box-shadow:0 0 0 3px var(--info-soft); }
.sync-launcher:active .icon { transform:rotate(38deg) scale(.94); }
.sync-launcher.is-syncing .icon,.sync-action.is-syncing .icon,.sync-overview-icon.is-syncing .icon { animation:cordelia-sync-spin 1s linear infinite; }
.sync-launcher.sync-complete,.sync-overview-icon.sync-complete { animation:cordelia-sync-success .55s var(--ease) both; }
.sync-launcher.sync-error { animation:cordelia-sync-error .34s ease both; }
@keyframes cordelia-sync-spin { to { transform:rotate(360deg); } }
@keyframes cordelia-sync-success { 0%,100%{transform:scale(1)} 45%{transform:scale(1.11)} }
@keyframes cordelia-sync-error { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-3px)} 65%{transform:translateX(3px)} }
.sync-arrow-path { stroke-linecap:round; stroke-linejoin:round; }

.sync-backdrop { position:fixed; inset:0; z-index:112; display:none; background:rgba(30,21,25,.34); }
.sync-backdrop.open { display:block; }
.sync-drawer { position:absolute; top:0; right:0; width:min(430px,calc(100vw - 20px)); height:100%; display:flex; flex-direction:column; background:var(--surface-solid); border-left:1px solid var(--line); box-shadow:var(--shadow-lg); animation:notification-in .22s var(--ease) both; }
.sync-drawer .notification-head p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.sync-body { flex:1; min-height:0; overflow:auto; padding:14px; display:grid; align-content:start; gap:14px; }
.sync-overview { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(125deg,var(--brand-soft),var(--surface-solid) 65%); }
.sync-overview-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--surface-solid); color:var(--brand); border:1px solid color-mix(in srgb,var(--brand) 20%,var(--line)); box-shadow:var(--shadow-sm); }
.sync-overview-icon .icon { width:22px; height:22px; }
.sync-overview strong,.sync-overview p { display:block; }
.sync-overview p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.sync-status-list { display:grid; border:1px solid var(--line); border-radius:15px; overflow:hidden; }
.sync-status-row { display:grid; grid-template-columns:10px minmax(0,1fr); gap:12px; padding:13px 14px; border-bottom:1px solid var(--line); }
.sync-status-row:last-child { border-bottom:0; }
.sync-status-row strong,.sync-status-row p,.sync-status-row small { display:block; }
.sync-status-row p { margin:2px 0; font-size:12px; font-weight:750; }
.sync-status-row small { color:var(--muted); font-size:10px; }
.sync-status-dot { width:8px; height:8px; margin-top:5px; border-radius:50%; background:var(--neutral); }
.sync-status-dot.tone-success { background:var(--success); box-shadow:0 0 0 4px var(--success-soft); }
.sync-status-dot.tone-warning { background:var(--warning); box-shadow:0 0 0 4px var(--warning-soft); }
.sync-status-dot.tone-danger { background:var(--danger); box-shadow:0 0 0 4px var(--danger-soft); }
.sync-status-dot.tone-neutral { background:var(--neutral); }
.sync-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sync-actions form,.sync-actions .btn { width:100%; }
.sync-actions .btn { justify-content:center; min-height:42px; }
.sync-feedback { padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--muted); font-size:11px; }
.sync-feedback.is-success { border-color:color-mix(in srgb,var(--success) 30%,var(--line)); background:var(--success-soft); color:var(--success); }
.sync-feedback.is-error { border-color:color-mix(in srgb,var(--danger) 30%,var(--line)); background:var(--danger-soft); color:var(--danger); }
.sync-queue { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:12px; background:var(--surface-2); color:var(--muted); font-size:11px; }
.sync-queue strong { color:var(--text); font-size:13px; }
.sync-network-hint { display:grid; grid-template-columns:auto 1fr; gap:10px; padding:12px; border:1px solid color-mix(in srgb,var(--info) 20%,var(--line)); border-radius:13px; background:var(--info-soft); }
.sync-network-hint .icon { width:17px; color:var(--info); }
.sync-network-hint p { margin:0; color:var(--muted); font-size:10.5px; line-height:1.5; }
body.sync-open { overflow:hidden; }

.connections-page { display:grid; gap:16px; }
.connection-health-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.connection-health { min-height:205px; }
.connection-health .card-head { align-items:flex-start; }
.connection-health .card-head h3 { margin-top:4px; }
.connection-metric { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); }
.connection-metric:last-child { border-bottom:0; }
.connection-metric span { color:var(--muted); font-size:10.5px; }
.connection-metric strong { max-width:60%; text-align:right; overflow-wrap:anywhere; font-size:11.5px; }
.connection-message { margin:10px 0 0; line-height:1.5; }
.connection-network-note .card-body { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:flex-start; }
.connection-network-note p { margin:4px 0 0; color:var(--muted); font-size:11.5px; line-height:1.55; }
.connection-note-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--info-soft); color:var(--info); }
.connection-note-icon .icon { width:19px; }
.connection-advanced { overflow:hidden; }
.connection-advanced > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; cursor:pointer; }
.connection-advanced > summary::-webkit-details-marker { display:none; }
.connection-advanced > summary strong,.connection-advanced > summary small { display:block; }
.connection-advanced > summary small { margin-top:4px; color:var(--muted); font-size:10.5px; }
.connection-summary-action { color:var(--brand); font-size:11px; font-weight:850; }
.connection-advanced[open] > summary { border-bottom:1px solid var(--line); }
.connection-device { padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.connection-device-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; }
.connection-device-head strong,.connection-device-head small { display:block; }
.connection-device-head small { margin-top:3px; color:var(--muted); font-size:10px; }

@media (max-width:1050px){ .connection-health-grid { grid-template-columns:1fr; } .connection-health { min-height:0; } }
@media (max-width:700px){ .sync-drawer { width:100%; } .sync-actions { grid-template-columns:1fr; } }
@media (max-width:520px){ .sync-launcher { width:38px; height:38px; } .connection-network-note .card-body { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .sync-launcher.is-syncing .icon,.sync-action.is-syncing .icon,.sync-overview-icon.is-syncing .icon { animation-duration:2.2s; } .sync-launcher.sync-complete,.sync-launcher.sync-error,.sync-overview-icon.sync-complete { animation:none; } }
\n\n/* 9.8B UX - Soporte integrado en sidebar */
.support-nav-section{margin-top:auto}.support-inline-card{border:1px solid transparent;border-radius:15px;overflow:hidden;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}.support-inline-card:has(.support-nav-link:hover){border-color:color-mix(in srgb,var(--brand) 14%,transparent)}.support-nav-link{width:100%;border:0;background:transparent;text-align:left;font:inherit;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) 14px;align-items:center;gap:10px;min-height:48px}.support-nav-link[aria-expanded="true"]{background:color-mix(in srgb,var(--brand) 7%,var(--surface-2));color:var(--brand)}.support-nav-copy{min-width:0;display:grid;gap:1px}.support-nav-copy strong{font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-nav-copy small{font-size:8.5px;line-height:1.3;color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.support-chevron{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transform-origin:center;opacity:.58;transition:transform .2s ease,opacity .2s ease}.support-inline-card:has(.support-nav-link[aria-expanded="true"]){border-color:color-mix(in srgb,var(--brand) 24%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 5%,var(--surface)),var(--surface));box-shadow:0 8px 24px rgba(75,44,52,.06)}.support-nav-link[aria-expanded="true"] .support-chevron{transform:rotate(225deg) translate(-1px,-1px);opacity:.85}
.support-inline-content{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .22s cubic-bezier(.2,.8,.2,1),opacity .16s ease}.support-inline-inner{min-height:0;overflow:hidden;padding:0 7px;display:grid;gap:7px;transition:padding .22s ease}.support-nav-section.is-open .support-inline-content{grid-template-rows:1fr;opacity:1}.support-nav-section.is-open .support-inline-inner{padding:3px 7px 8px}.support-inline-action{display:grid;grid-template-columns:30px minmax(0,1fr) 12px;align-items:center;gap:9px;min-height:48px;padding:8px 9px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface-solid) 88%,var(--surface-2));color:var(--text);text-decoration:none;transition:background .16s ease,border-color .16s ease,transform .16s ease}.support-inline-action:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--brand) 30%,var(--line));transform:translateY(-1px)}.support-inline-action:focus-visible{outline:2px solid color-mix(in srgb,var(--brand) 50%,transparent);outline-offset:1px}.support-inline-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 9%,var(--surface));color:var(--brand);font-size:10px;font-weight:900;letter-spacing:-.02em}.support-inline-action>span:nth-child(2){min-width:0;display:grid;gap:1px}.support-inline-action strong{font-size:10.5px;line-height:1.25}.support-inline-action small{font-size:8.5px;color:var(--muted);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.support-external{font-size:11px;color:var(--muted);justify-self:end}.support-whatsapp{border-color:color-mix(in srgb,var(--brand) 18%,var(--line))}
@media(max-width:900px){.support-nav-section{margin-top:8px}.support-inline-action{min-height:50px}.support-nav-copy small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.support-inline-card,.support-chevron,.support-inline-content,.support-inline-inner,.support-inline-action{transition:none!important}}
.payroll-day-action{font-size:.78rem;font-weight:800;color:var(--brand);white-space:nowrap}.payroll-day-row:hover .payroll-day-action{text-decoration:underline}
.payroll-context-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 17px;margin:14px 0;border:1px solid color-mix(in srgb,var(--brand3) 32%,var(--line));border-radius:17px;background:color-mix(in srgb,var(--brand3) 8%,var(--surface))}.payroll-context-banner>div:first-child{display:grid;gap:3px}.payroll-context-banner strong{font-size:.94rem}.payroll-context-banner p{margin:0;color:var(--muted);font-size:.82rem}.payroll-context-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}@media(max-width:700px){.payroll-context-banner{align-items:stretch;flex-direction:column}.payroll-context-actions{justify-content:flex-start}.payroll-context-actions .btn{flex:1}}

/* ===== 9.8B · Conciliación administrativa de jornada ===== */
.attendance-reconcile-card{scroll-margin-top:18px;border-color:color-mix(in srgb,var(--brand3) 28%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--brand3) 4%,var(--surface)),var(--surface))}
.attendance-reconcile-card .card-head{align-items:flex-start}.attendance-reconcile-card .card-body{display:grid;gap:14px}
.attendance-admin-note{display:grid;gap:3px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--brand3) 25%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--brand3) 7%,var(--surface));font-size:.82rem}.attendance-admin-note span{color:var(--muted)}
.attendance-admin-time-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.incident-conditional>small{display:block;margin-top:6px;color:var(--muted);font-size:.78rem;line-height:1.45}
.admin-adjustment-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.source-pill{display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:3px 7px;border-radius:999px;font-size:.66rem;font-weight:850;letter-spacing:.045em}.source-pill.is-admin{background:color-mix(in srgb,var(--brand3) 13%,var(--surface));color:var(--brand3);border:1px solid color-mix(in srgb,var(--brand3) 28%,var(--line))}
.admin-adjustment-time{font-size:.92rem!important;font-weight:800!important;color:var(--text)!important}.admin-adjustment-list>div.is-voided{opacity:.58;text-decoration:none}.admin-adjustment-list>div.is-voided strong{text-decoration:line-through}
.incident-result-preview{display:grid;gap:3px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2)}.incident-result-preview>span{font-size:.7rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}.incident-result-preview>strong{font-size:.88rem;line-height:1.45}.incident-result-preview>small{color:var(--muted);line-height:1.4}
.incident-confirm-step{margin-top:12px;padding:14px;border-radius:15px;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));background:color-mix(in srgb,var(--brand) 5%,var(--surface))}.incident-confirm-step h4{margin:3px 0 6px}.incident-confirm-step p{margin:0;color:var(--muted)}.incident-confirm-step ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:.8rem;line-height:1.5}
@media(max-width:600px){.attendance-admin-time-grid{grid-template-columns:1fr}.attendance-reconcile-card .form-actions{display:grid;grid-template-columns:1fr}.attendance-reconcile-card .form-actions .btn{width:100%;justify-content:center}}