:root {
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sidebar-width: 218px;
    --sidebar-collapsed-width: 78px;
    --topbar-height: 82px;
    --radius-lg: 12px;
    --radius-md: 9px;
    --radius-sm: 6px;
    --accent: #ff4d55;
    --accent-hover: #ff6269;
    --accent-soft: rgba(255, 77, 85, .12);
    --green: #24d46a;
    --amber: #f5a524;
    --blue: #3988ff;
    --purple: #8b5cf6;
    --red: #ff4d55;
    --cyan: #2bc8d7;
}

html[data-theme="dark"] {
    --bg: #050b12;
    --bg-elevated: #08111b;
    --panel: #0a141f;
    --panel-2: #0d1824;
    --panel-hover: #101e2d;
    --border: #1c2b3a;
    --border-strong: #26394b;
    --text: #f5f7fa;
    --text-soft: #b7c0ca;
    --muted: #7d8997;
    --sidebar: #06101a;
    --input: #08131e;
    --shadow: 0 14px 45px rgba(0,0,0,.24);
    --chart-grid: #1c2a38;
    --chart-blue: #3988ff;
}

html[data-theme="light"] {
    --bg: #f3f6f9;
    --bg-elevated: #ffffff;
    --panel: #ffffff;
    --panel-2: #f8fafc;
    --panel-hover: #f3f6fa;
    --border: #dbe3eb;
    --border-strong: #c8d3df;
    --text: #17212d;
    --text-soft: #52606f;
    --muted: #7b8794;
    --sidebar: #ffffff;
    --input: #f8fafc;
    --shadow: 0 12px 34px rgba(30, 55, 78, .09);
    --chart-grid: #dfe6ed;
    --chart-blue: #2875e8;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.45; transition: background .2s ease, color .2s ease; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* App shell */
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 30; transition: width .2s ease, background .2s ease; }
.brand { height: 82px; display: flex; align-items: center; gap: 10px; padding: 0 24px; font-size: 22px; font-weight: 750; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; }
.brand-mark { width: 37px; height: 37px; flex: none; }
.brand-name { transition: opacity .15s ease; }
.sidebar-nav { display: flex; flex-direction: column; gap: 5px; padding: 4px 8px; }
.nav-item { position: relative; min-height: 48px; border-radius: 7px; display: flex; align-items: center; gap: 13px; padding: 0 14px; color: var(--text-soft); transition: background .15s ease, color .15s ease; border: 0; background: transparent; text-align: left; width: 100%; cursor: pointer; white-space: nowrap; overflow: hidden; }
.nav-item:hover { background: var(--panel-hover); color: var(--text); }
.nav-item.active { background: linear-gradient(90deg, var(--accent-soft), rgba(255,77,85,.025)); color: var(--text); }
.nav-item.active::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px rgba(255,77,85,.45); }
.nav-icon { width: 22px; height: 22px; display:grid; place-items:center; flex:none; }
.nav-icon svg { width: 21px; height: 21px; }
.nav-item.active .nav-icon { color: var(--accent); }
.nav-label { overflow:hidden; text-overflow:ellipsis; }
.sidebar-footer { margin-top: auto; padding: 8px 8px 18px; border-top: 1px solid var(--border); }

.app-main { min-height: 100vh; margin-left: var(--sidebar-width); transition: margin-left .2s ease; }
.topbar { height: var(--topbar-height); display:flex; align-items:center; justify-content:space-between; padding: 0 30px; background: color-mix(in srgb, var(--bg) 93%, transparent); border-bottom:1px solid var(--border); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.topbar-actions { margin-left:auto; display:flex; gap:12px; align-items:center; }
.date-chip, .profile-button, .icon-button { border:1px solid var(--border); background: var(--panel); border-radius:8px; height:43px; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition:.15s ease; }
.date-chip:hover, .profile-button:hover, .icon-button:hover { border-color:var(--border-strong); background:var(--panel-hover); }
.date-chip { padding:0 14px; min-width:155px; }
.date-chip svg { width:18px; }
.chevron { width:15px!important; height:15px!important; }
.global-search { width:min(330px, 26vw); height:43px; position:relative; display:block; }
.global-search input { width:100%; height:100%; border:1px solid var(--border); border-radius:8px; background:var(--input); color:var(--text); padding:0 42px 0 14px; outline:none; }
.global-search input:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow:0 0 0 3px var(--accent-soft); }
.global-search svg { position:absolute; right:13px; top:11px; color:var(--muted); }
.icon-button { width:43px; padding:0; position:relative; }
.notification-badge { position:absolute; top:-5px; right:-6px; min-width:19px; height:19px; border-radius:10px; display:grid; place-items:center; padding:0 4px; font-size:12.5px; font-weight:750; background:var(--accent); color:white; border:2px solid var(--bg); }
.profile-button { padding:0 12px 0 8px; min-width:124px; }
.avatar { width:30px; height:30px; border-radius:50%; background:#203044; color:#fff; display:grid; place-items:center; font-weight:700; }
.profile-name { font-weight:600; }

.page-content { padding: 22px 30px 34px; }
.page-heading-row { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.page-heading-row h1 { margin:0; font-size:29px; line-height:1.15; letter-spacing:-.6px; font-weight:720; }
.page-heading-row p { margin:7px 0 0; color:var(--muted); }

/* Dashboard */
.metric-grid { display:grid; gap:12px; }
.metric-grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.metric-card, .panel, .placeholder-panel { background:linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--panel-2) 75%, var(--panel))); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow); }
.metric-card { min-height:130px; padding:18px 19px; }
.metric-topline { display:flex; align-items:center; gap:11px; color:var(--text-soft); font-size:14px; }
.metric-icon { width:43px; height:43px; border-radius:50%; display:grid; place-items:center; flex:none; }
.metric-icon svg { width:21px; height:21px; }
.metric-icon.blue { color:#3587ff; background:rgba(53,135,255,.14); }
.metric-icon.red, .metric-icon.danger { color:#ff4d55; background:rgba(255,77,85,.14); }
.metric-icon.green { color:#20cd67; background:rgba(32,205,103,.14); }
.metric-icon.amber { color:#f5a524; background:rgba(245,165,36,.14); }
.metric-value { font-size:27px; font-weight:750; line-height:1; margin:10px 0 8px 54px; letter-spacing:-.5px; }
.metric-change { margin-left:54px; font-size:12.5px; font-weight:700; }
.metric-change span { color:var(--muted); font-weight:400; margin-left:4px; }
.metric-change.positive { color:var(--green); }
.metric-change.negative { color:var(--accent); }
.dashboard-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin-top:12px; }
.dashboard-grid.top { grid-template-columns: 2fr 1.05fr 1.35fr; }
.dashboard-grid.bottom { grid-template-columns: .85fr 1.05fr 2fr .85fr; }
.panel { padding:19px; min-width:0; }
.panel.compact { min-height:300px; }
.panel.span-2 { grid-column: span 1; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.panel-heading h2 { margin:0; font-size:16px; font-weight:700; letter-spacing:-.2px; }
.panel-subtitle { display:block; margin-top:8px; color:var(--text-soft); font-size:13px; }
.small-select { border:1px solid var(--border); background:var(--panel-2); border-radius:6px; padding:7px 9px; color:var(--text-soft); font-size:12.5px; cursor:pointer; }
.panel-link { color:var(--accent); font-size:13px; font-weight:650; }
.panel-link:hover { color:var(--accent-hover); }

.line-chart { position:relative; height:280px; padding:7px 10px 24px 45px; color:var(--chart-blue); }
.line-chart svg { width:100%; height:220px; overflow:visible; }
.chart-grid-line { stroke:var(--chart-grid); stroke-width:1; }
.chart-fill { fill:url(#activityFill); stroke:none; }
.chart-line { stroke:currentColor; stroke-width:2.6; fill:none; }
.chart-point { fill:currentColor; stroke:color-mix(in srgb, var(--panel) 60%, transparent); stroke-width:2; }
.chart-y-labels { position:absolute; left:0; top:3px; bottom:38px; display:flex; flex-direction:column; justify-content:space-between; color:var(--muted); font-size:12.5px; }
.chart-x-labels { position:absolute; left:45px; right:6px; bottom:0; display:flex; justify-content:space-between; color:var(--muted); font-size:12.5px; }

.donut-wrap { display:flex; align-items:center; justify-content:center; gap:22px; min-height:190px; }
.donut { width:150px; height:150px; border-radius:50%; position:relative; display:grid; place-items:center; flex:none; }
.donut::after { content:""; position:absolute; inset:20px; border-radius:50%; background:var(--panel); }
.donut.active-idle { background:conic-gradient(var(--green) 0 74%, #566271 74% 100%); }
.donut > div { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.donut strong { font-size:22px; }
.donut span { color:var(--text-soft); font-size:12.5px; }
.legend-list { min-width:120px; }
.legend-list > div, .status-list > div { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 0; font-size:13px; }
.legend-list span, .status-list span { display:flex; align-items:center; gap:8px; }
.legend-list strong, .status-list strong { font-size:13px; }
.legend-list em, .status-list em { color:var(--muted); font-style:normal; font-weight:500; }
.legend-dot, .status-dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }
.legend-dot.green, .status-dot.online { background:var(--green); }
.legend-dot.gray { background:#566271; }
.status-dot.delayed { background:var(--amber); }
.status-dot.offline { background:var(--red); }
.status-dot.info { background:var(--blue); }
.updated-note { color:var(--muted); font-size:12.5px; }

.bar-list { display:flex; flex-direction:column; gap:19px; padding-top:8px; }
.bar-row { display:grid; grid-template-columns:95px 1fr 36px; gap:10px; align-items:center; font-size:12.5px; }
.bar-row > span { color:var(--text-soft); }
.bar-track { height:19px; border-left:1px solid var(--border-strong); background:repeating-linear-gradient(90deg, transparent 0 24.8%, var(--chart-grid) 25% 25.2%); }
.bar-track i { display:block; height:100%; background:linear-gradient(90deg, #ff5d63, #f04a52); border-radius:0 2px 2px 0; }
.bar-row strong { font-size:13px; text-align:right; }

.status-list { padding-top:6px; }
.panel-footer-stat { border-top:1px solid var(--border); margin-top:22px; padding-top:18px; display:flex; justify-content:space-between; color:var(--text-soft); }
.panel-footer-stat strong { color:var(--text); }
.application-list { display:flex; flex-direction:column; }
.application-list > div { display:grid; grid-template-columns:20px 25px 1fr auto 38px; gap:8px; align-items:center; padding:8px 0; }
.rank { color:var(--muted); }
.app-badge { width:22px; height:22px; border-radius:4px; display:grid; place-items:center; background:rgba(57,136,255,.18); color:#4f9aff; font-size:12.5px; font-weight:800; }
.app-name { color:var(--text-soft); }
.application-list strong { font-size:12.5px; }
.application-list em { color:var(--muted); font-style:normal; font-size:12.5px; text-align:right; }

.data-table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.data-table th { color:var(--muted); font-weight:500; text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
.data-table td { padding:10px; border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent); color:var(--text-soft); white-space:nowrap; }
.severity { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; }
.severity.critical { background:var(--red); }
.severity.medium { background:var(--amber); }
.severity.info { background:var(--blue); }
.badge { display:inline-block; padding:4px 7px; border-radius:4px; font-size:12.5px; border:1px solid; }
.badge-red { color:#ff686e; border-color:rgba(255,77,85,.38); background:rgba(255,77,85,.08); }
.badge-blue { color:#60a5fa; border-color:rgba(57,136,255,.35); background:rgba(57,136,255,.08); }
.badge-green { color:#39dc7c; border-color:rgba(36,212,106,.32); background:rgba(36,212,106,.08); }
.panel-bottom-link { display:inline-block; margin-top:15px; }
.pending-card { display:flex; flex-direction:column; align-items:flex-start; }
.pending-number { color:var(--accent); font-size:42px; font-weight:750; margin:auto auto 0; }
.pending-card p { color:var(--text-soft); text-align:center; margin:9px auto 26px; line-height:1.45; }
.pending-card .panel-link { margin-top:auto; }
.prototype-note { margin-top:14px; color:var(--muted); font-size:12.5px; text-align:right; }

/* Placeholder pages */
.placeholder-panel { min-height:430px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; }
.placeholder-icon { width:84px; height:84px; border-radius:22px; display:grid; place-items:center; background:var(--accent-soft); margin-bottom:18px; }
.placeholder-icon img { width:55px; height:55px; }
.placeholder-panel h2 { margin:0; font-size:24px; }
.placeholder-panel p { color:var(--muted); max-width:580px; line-height:1.55; }
.secondary-button, .primary-button { min-height:42px; border-radius:7px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-weight:650; }
.secondary-button { border:1px solid var(--border-strong); background:var(--panel-2); }
.secondary-button:hover { background:var(--panel-hover); }
.primary-button { border:0; background:linear-gradient(135deg, #ff4d55, #ff5962); color:white; box-shadow:0 8px 24px rgba(255,77,85,.18); }
.primary-button:hover { background:linear-gradient(135deg, #ff5b63, #ff6870); }

/* Sidebar collapsed */
.app-shell.sidebar-collapsed .sidebar { width:var(--sidebar-collapsed-width); }
.app-shell.sidebar-collapsed .app-main { margin-left:var(--sidebar-collapsed-width); }
.app-shell.sidebar-collapsed .brand { padding:0 20px; }
.app-shell.sidebar-collapsed .brand-name, .app-shell.sidebar-collapsed .nav-label { opacity:0; width:0; }
.app-shell.sidebar-collapsed .nav-item { justify-content:center; padding:0; }
.app-shell.sidebar-collapsed .nav-item.active::before { left:0; }
.app-shell.sidebar-collapsed .sidebar-collapse svg { transform:rotate(180deg); }

/* Login */
.auth-page { overflow-x:hidden; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(500px, 46%) 1fr; position:relative; background:var(--bg); }
.login-card { width:min(600px, calc(100% - 80px)); margin:auto; border:1px solid var(--border); background:color-mix(in srgb, var(--panel) 92%, transparent); border-radius:14px; padding:52px; box-shadow:0 25px 70px rgba(0,0,0,.20); position:relative; z-index:3; backdrop-filter:blur(18px); }
.login-brand { display:flex; align-items:center; gap:13px; font-size:28px; font-weight:760; margin-bottom:70px; }
.login-brand .brand-mark { width:48px; height:48px; }
.login-copy h1 { font-size:34px; margin:0 0 12px; letter-spacing:-.9px; }
.login-copy p { margin:0 0 42px; color:var(--text-soft); font-size:17px; }
.login-form { display:flex; flex-direction:column; gap:24px; }
.login-form label > span { display:block; margin-bottom:10px; font-weight:600; }
.input-wrap { position:relative; }
.input-wrap > svg { position:absolute; left:17px; top:17px; color:var(--muted); width:21px; height:21px; pointer-events:none; }
.input-wrap input { width:100%; height:58px; border:1px solid var(--border-strong); border-radius:8px; background:var(--input); color:var(--text); outline:none; padding:0 52px; font-size:16px; }
.input-wrap input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input-wrap input::placeholder { color:color-mix(in srgb, var(--muted) 75%, transparent); }
.password-toggle { position:absolute; right:10px; top:9px; width:40px; height:40px; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.login-options { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:-3px; }
.checkbox-row { display:flex!important; align-items:center; gap:10px; color:var(--text-soft); cursor:pointer; }
.checkbox-row input { appearance:none; width:22px; height:22px; border:1px solid var(--border-strong); border-radius:3px; background:var(--input); position:relative; }
.checkbox-row input:checked { background:var(--accent); border-color:var(--accent); }
.checkbox-row input:checked::after { content:"✓"; color:white; position:absolute; inset:0; display:grid; place-items:center; font-size:14px; }
.checkbox-row span { margin:0!important; font-weight:400!important; }
.login-options a { color:var(--accent); font-weight:600; }
.login-submit { height:58px; font-size:17px; margin-top:5px; }
.login-secure { border-top:1px solid var(--border); margin-top:34px; padding-top:32px; display:flex; justify-content:center; align-items:center; gap:10px; color:var(--muted); font-size:15px; }
.login-secure svg { width:20px; }
.login-theme-toggle { position:absolute; top:24px; right:28px; z-index:10; height:40px; display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text-soft); padding:0 12px; cursor:pointer; }
.login-theme-toggle svg { width:18px; }

.login-visual { position:relative; min-height:100vh; overflow:hidden; background:radial-gradient(circle at 58% 58%, rgba(255,77,85,.08), transparent 30%), radial-gradient(circle at 38% 60%, rgba(52,120,255,.09), transparent 36%), var(--bg); }
.network-grid { position:absolute; inset:0; opacity:.55; background-image:linear-gradient(rgba(64,115,170,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(64,115,170,.10) 1px, transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to bottom, transparent, black 20%, black 82%, transparent); }
.network-wave { position:absolute; left:-8%; right:-8%; height:320px; top:58%; transform:rotate(-4deg); border-top:1px solid rgba(255,78,87,.45); border-radius:50%; filter:drop-shadow(0 0 8px rgba(255,77,85,.25)); }
.network-wave::before, .network-wave::after { content:""; position:absolute; left:0; right:0; border-top:1px solid; border-radius:50%; }
.wave-a::before { top:22px; border-color:rgba(57,136,255,.35); transform:rotate(2deg); }
.wave-a::after { top:-25px; border-color:rgba(255,77,85,.25); transform:rotate(-2deg); }
.wave-b { top:66%; transform:rotate(4deg); border-color:rgba(57,136,255,.28); }
.network-glow { position:absolute; width:55%; height:18%; left:30%; top:62%; background:radial-gradient(ellipse, rgba(255,77,85,.22), rgba(55,119,255,.08) 38%, transparent 72%); filter:blur(20px); }
.floating-card { position:absolute; z-index:2; width:280px; padding:18px; border:1px solid var(--border-strong); border-radius:10px; background:color-mix(in srgb, var(--panel) 94%, transparent); box-shadow:0 18px 55px rgba(0,0,0,.30); backdrop-filter:blur(12px); }
.agent-card { top:14%; left:45%; }
.asset-card { top:43%; left:25%; width:300px; }
.alerts-card { top:55%; right:8%; width:300px; }
.floating-heading { display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.floating-heading strong { margin-right:auto; }
.floating-heading .metric-icon { width:36px; height:36px; }
.floating-heading .metric-icon svg { width:18px; }
.muted { color:var(--text-soft); font-size:13px; }
.mini-stat { display:flex; align-items:center; justify-content:space-between; padding:7px 0; }
.mini-stat span { display:flex; align-items:center; gap:8px; color:var(--text-soft); }
.hero-metric-row { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.hero-metric-row b { font-size:27px; }
.trend-up { color:var(--green); font-weight:700; }
.trend-down { color:var(--accent); font-weight:700; }

/* Responsive */
@media (max-width: 1380px) {
    .metric-grid.six { grid-template-columns: repeat(3, 1fr); }
    .dashboard-grid.top { grid-template-columns: 2fr 1fr; }
    .dashboard-grid.top .panel:last-child { grid-column:1/-1; }
    .dashboard-grid.bottom { grid-template-columns:1fr 1fr; }
    .dashboard-grid.bottom .span-2 { grid-column:1/-1; }
}

@media (max-width: 1050px) {
    :root { --sidebar-width: 78px; }
    .brand { padding:0 20px; }
    .brand-name, .nav-label { display:none; }
    .nav-item { justify-content:center; padding:0; }
    .profile-name, .date-chip span { display:none; }
    .date-chip { min-width:43px; width:43px; padding:0; }
    .date-chip .chevron { display:none; }
    .global-search { width:260px; }
    .login-shell { grid-template-columns:1fr; }
    .login-card { margin:80px auto 50px; width:min(620px, calc(100% - 40px)); }
    .login-visual { position:absolute; inset:0; min-height:100%; opacity:.42; pointer-events:none; }
    .floating-card { display:none; }
}

@media (max-width: 760px) {
    :root { --sidebar-width: 0px; }
    .sidebar { transform:translateX(-100%); }
    .app-main { margin-left:0; }
    .topbar { padding:0 14px; }
    .global-search { display:none; }
    .page-content { padding:18px 14px 28px; }
    .metric-grid.six { grid-template-columns:1fr 1fr; }
    .dashboard-grid.top, .dashboard-grid.bottom { grid-template-columns:1fr; }
    .dashboard-grid.top .panel:last-child, .dashboard-grid.bottom .span-2 { grid-column:auto; }
    .login-card { padding:32px 24px; margin-top:70px; }
    .login-brand { margin-bottom:40px; }
    .login-copy h1 { font-size:29px; }
    .login-copy p { font-size:15px; }
    .login-theme-toggle span { display:none; }
}

@media (max-width: 480px) {
    .metric-grid.six { grid-template-columns:1fr; }
    .login-options { align-items:flex-start; flex-direction:column; }
    .login-card { width:calc(100% - 24px); }
}

/* ========================================================================== 
   Phase 2 · Authentication feedback and authenticated profile menu
   ========================================================================== */
.auth-message {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: -14px 0 24px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.45;
}
.auth-message strong { font-size: 14px; }
.auth-message small { margin-top: 3px; color: var(--muted); word-break: break-all; }
.auth-message-error {
    border-color: color-mix(in srgb, #ff525c 46%, var(--border));
    background: color-mix(in srgb, #ff525c 10%, var(--panel));
    color: var(--text);
}
.auth-message-success {
    border-color: color-mix(in srgb, #42c98b 42%, var(--border));
    background: color-mix(in srgb, #42c98b 9%, var(--panel));
    color: var(--text);
}
.input-wrap.has-error { border-color: #ff5b64; box-shadow: 0 0 0 3px rgba(255,91,100,.08); }
.field-error { display:block; margin-top:7px; color:#ff6b73; font-size:14px; }
.login-link-button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
}
.login-link-button:disabled { opacity: .55; cursor: not-allowed; }
.login-submit[disabled] { opacity: .72; cursor: wait; }

.profile-menu { position: relative; }
.profile-dropdown {
    position: absolute;
    z-index: 40;
    top: calc(100% + 10px);
    right: 0;
    width: 290px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--panel);
    box-shadow: 0 18px 45px rgba(0,0,0,.26);
}
.profile-dropdown[hidden] { display: none; }
.profile-dropdown-user { display:flex; align-items:center; gap:12px; padding:10px; }
.profile-dropdown-user > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.profile-dropdown-user strong { color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-dropdown-user span:not(.avatar) { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.avatar-large { width:38px; height:38px; flex:0 0 38px; }
.profile-role-list { display:flex; flex-wrap:wrap; gap:6px; padding:4px 10px 10px; }
.profile-role {
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:3px 8px;
    border-radius:999px;
    background:var(--panel-hover);
    border:1px solid var(--border);
    color:var(--text-soft);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:capitalize;
}
.profile-dropdown-divider { height:1px; margin:4px 0; background:var(--border); }
.profile-logout {
    width:100%;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--text-soft);
    min-height:42px;
    padding:0 10px;
    display:flex;
    align-items:center;
    gap:9px;
    cursor:pointer;
    font:inherit;
    font-weight:600;
    text-align:left;
}
.profile-logout:hover { background:var(--panel-hover); color:#ff626b; }
.profile-logout svg { width:18px; }

@media (max-width: 760px) {
    .profile-dropdown { width:min(290px, calc(100vw - 30px)); }
}

/* --------------------------------------------------------------------------
   Phase 3: live dashboard states
   -------------------------------------------------------------------------- */
.metric-context {
    margin-top: 8px;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.35;
}

.dashboard-warning {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 10px;
    background: rgba(245, 158, 11, .08);
    color: var(--text);
    font-size: 13px;
}

.dashboard-warning span { color: var(--text-soft); }

.panel-empty {
    min-height: 150px;
    display: grid;
    place-items: center;
    color: var(--text-soft);
    font-size: 13px;
}

.activity-disclaimer {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: -2px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel);
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.5;
}

.activity-disclaimer span { color: var(--blue); font-size: 15px; }
.activity-disclaimer p { margin: 0; }

.donut.active-idle {
    background: conic-gradient(
        var(--green) 0 var(--active-share, 0%),
        #566271 var(--active-share, 0%) 100%
    );
}

.badge-gray {
    color: var(--text-soft);
    border-color: var(--border);
    background: var(--panel-2);
}

/* --------------------------------------------------------------------------
   Phase 4.1: Employee Directory
   -------------------------------------------------------------------------- */
.metric-icon.purple { color:#8b5cf6; background:rgba(139,92,246,.14); }
.badge-amber { color:#f7b64c; border-color:rgba(245,165,36,.36); background:rgba(245,165,36,.09); }

.employees-heading { margin-bottom: 18px; }
.employees-metrics { margin-bottom: 12px; }
.employees-metrics .metric-context { margin-left: 54px; }

.employee-filterbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, .72fr)) minmax(260px, 1.45fr) auto auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.filter-control { display:flex; flex-direction:column; gap:6px; min-width:0; }
.filter-control > span { color:var(--muted); font-size:12.5px; font-weight:650; }
.filter-control select,
.employee-search input,
.page-size-form select {
    width:100%;
    height:39px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--input);
    color:var(--text);
    padding:0 11px;
    outline:none;
}
.filter-control select:focus,
.employee-search input:focus,
.page-size-form select:focus { border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow:0 0 0 3px var(--accent-soft); }
.employee-search { position:relative; display:block; }
.employee-search input { padding-right:40px; }
.employee-search svg { position:absolute; right:12px; bottom:9px; width:18px; color:var(--muted); }
.filter-submit, .filter-clear { min-height:39px; padding:0 14px; white-space:nowrap; }

.employees-layout { display:grid; grid-template-columns:minmax(0, 1fr) 295px; gap:12px; align-items:start; }
.employee-directory-panel { padding:0; overflow:hidden; }
.employee-directory-header { min-height:68px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--border); }
.employee-directory-header h2 { margin:0; font-size:16px; }
.employee-directory-header > div:first-child { display:flex; align-items:baseline; gap:8px; }
.employee-directory-header > div:first-child span { color:var(--muted); font-size:12.5px; }
.directory-actions { display:flex; gap:8px; }
.directory-actions .primary-button { min-height:38px; gap:7px; }
.directory-actions .primary-button svg { width:16px; }
.directory-actions .primary-button:disabled { opacity:.58; cursor:not-allowed; box-shadow:none; }

.employee-table-wrap { width:100%; overflow:auto; }
.employee-table { width:100%; border-collapse:collapse; min-width:1050px; font-size:12.5px; }
.employee-table th { padding:11px 12px; color:var(--muted); font-weight:550; text-align:left; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--panel-2) 60%, transparent); }
.employee-table td { padding:10px 12px; color:var(--text-soft); border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent); vertical-align:middle; }
.employee-table tbody tr:hover { background:color-mix(in srgb, var(--panel-hover) 72%, transparent); }
.employee-identity { display:flex; align-items:center; gap:9px; min-width:200px; }
.employee-avatar { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none; background:linear-gradient(145deg, #2466ad, #744fd8); color:white; font-size:12.5px; font-weight:800; letter-spacing:.02em; }
.employee-identity > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.employee-identity strong { color:var(--text); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:175px; }
.employee-identity span:not(.employee-avatar) { color:var(--muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:175px; }
.employee-number { color:var(--text); font-variant-numeric:tabular-nums; }
.boolean-indicator { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:12.5px; }
.boolean-indicator i { width:7px; height:7px; border-radius:50%; display:block; }
.boolean-indicator.yes { color:#38d97a; }
.boolean-indicator.yes i { background:#24d46a; }
.boolean-indicator.no { color:var(--text-soft); }
.boolean-indicator.no i { background:#758291; }
.boolean-indicator.unknown { color:var(--muted); }
.employee-actions-column { width:72px; text-align:center!important; }
.row-menu-button { width:30px; height:30px; display:inline-grid; place-items:center; border:0; border-radius:6px; background:transparent; color:var(--muted); }
.row-menu-button svg { width:17px; }
.row-menu-button:disabled { opacity:.45; cursor:not-allowed; }

.employee-empty-state { min-height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--muted); }
.employee-empty-state strong { color:var(--text); font-size:14px; }
.employee-empty-icon { width:50px; height:50px; margin-bottom:4px; border-radius:14px; display:grid; place-items:center; background:var(--panel-hover); color:var(--text-soft); }

.employee-table-footer { min-height:58px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--muted); font-size:12.5px; border-top:1px solid var(--border); }
.employee-pagination-controls { display:flex; align-items:center; gap:18px; }
.page-size-form label { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.page-size-form select { width:63px; height:32px; padding:0 7px; }
.pagination-nav { display:flex; align-items:center; gap:5px; }
.pagination-nav a,
.pagination-nav span { min-width:31px; height:31px; padding:0 8px; display:grid; place-items:center; border:1px solid transparent; border-radius:6px; color:var(--text-soft); }
.pagination-nav a:hover { background:var(--panel-hover); border-color:var(--border); color:var(--text); }
.pagination-nav .active { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.pagination-nav .disabled { color:color-mix(in srgb, var(--muted) 48%, transparent); }
.pagination-nav .ellipsis { min-width:20px; padding:0; }

.employees-side-column { display:flex; flex-direction:column; gap:12px; }
.employees-side-column .panel { padding:16px; }
.employees-side-column .panel-heading { margin-bottom:12px; }
.employees-side-column .panel-heading h2 { font-size:14px; }
.area-summary-list { display:flex; flex-direction:column; gap:13px; }
.area-summary-item { display:flex; flex-direction:column; gap:6px; }
.area-summary-label { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--text-soft); }
.area-summary-label strong { color:var(--text); }
.area-summary-track { height:6px; overflow:hidden; border-radius:999px; background:var(--panel-hover); }
.area-summary-track span { display:block; width:var(--area-width); height:100%; border-radius:inherit; background:linear-gradient(90deg, #ff4d55, #ff777d); }
.employees-without-assets p,
.employees-phase-note p { margin:7px 0 14px; color:var(--text-soft); font-size:12.5px; line-height:1.5; }
.side-big-number { display:block; color:var(--accent); font-size:34px; line-height:1; margin:5px 0 8px; }
.employees-phase-note { border-style:dashed; }

@media (max-width: 1450px) {
    .employee-filterbar { grid-template-columns:repeat(4, minmax(130px, 1fr)) minmax(250px, 2fr); }
    .filter-submit, .filter-clear { grid-row:2; }
    .filter-submit { grid-column:4; }
    .filter-clear { grid-column:5; }
    .employees-layout { grid-template-columns:minmax(0, 1fr) 260px; }
}

@media (max-width: 1180px) {
    .employees-layout { grid-template-columns:1fr; }
    .employees-side-column { display:grid; grid-template-columns:repeat(3, 1fr); }
    .employee-filterbar { grid-template-columns:repeat(2, 1fr); }
    .employee-search { grid-column:1 / -1; }
    .filter-submit, .filter-clear { grid-row:auto; grid-column:auto; }
}

@media (max-width: 760px) {
    .employee-filterbar { grid-template-columns:1fr; }
    .employee-search { grid-column:auto; }
    .employees-side-column { grid-template-columns:1fr; }
    .employee-directory-header { align-items:flex-start; flex-direction:column; }
    .employee-table-footer { align-items:flex-start; flex-direction:column; }
    .employee-pagination-controls { width:100%; justify-content:space-between; flex-wrap:wrap; }
}

/* ========================================================================== 
   Employees · Phase 4.2
   Employee lifecycle, detail, forms and Windows-account management.
   ========================================================================== */
.employee-flash {
    margin:0 0 14px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:8px;
    font-size:12.5px;
    line-height:1.45;
}
.employee-flash.success { color:#24b966; background:color-mix(in srgb, #1fc768 10%, var(--panel)); border-color:color-mix(in srgb, #1fc768 34%, var(--border)); }
.employee-flash.error { color:#ff5c64; background:color-mix(in srgb, #ff4d55 9%, var(--panel)); border-color:color-mix(in srgb, #ff4d55 34%, var(--border)); }

.directory-actions .primary-button { text-decoration:none; }
.row-action-menu { position:relative; display:inline-block; }
.row-action-menu summary { list-style:none; cursor:pointer; }
.row-action-menu summary::-webkit-details-marker { display:none; }
.row-action-menu[open] .row-menu-button { background:var(--panel-hover); color:var(--text); }
.row-action-popover {
    position:absolute;
    z-index:30;
    top:34px;
    right:0;
    width:156px;
    padding:6px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--panel);
    box-shadow:0 14px 34px rgba(0,0,0,.18);
    text-align:left;
}
.row-action-popover a { display:block; padding:8px 9px; border-radius:6px; color:var(--text-soft); font-size:12.5px; text-decoration:none; }
.row-action-popover a:hover { background:var(--panel-hover); color:var(--text); }
.row-action-popover a.danger { color:#ff5b63; }

.employee-subpage-heading { margin-bottom:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.employee-subpage-heading h1 { margin:7px 0 4px; font-size:25px; }
.employee-subpage-heading p { margin:0; color:var(--muted); font-size:12.5px; }
.employee-breadcrumb, .employee-detail-breadcrumb a { color:var(--accent); font-size:12.5px; text-decoration:none; }
.employee-detail-breadcrumb { margin-bottom:12px; display:flex; gap:7px; align-items:center; color:var(--muted); font-size:12.5px; }

.employee-editor-form { display:flex; flex-direction:column; gap:14px; }
.employee-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.employee-form-section { padding:18px; }
.employee-section-heading { display:flex; align-items:center; gap:11px; padding-bottom:15px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.employee-section-heading h2 { margin:0 0 3px; font-size:15px; }
.employee-section-heading p { margin:0; color:var(--muted); font-size:12.5px; }
.employee-section-icon { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none; }
.employee-section-icon svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.employee-section-icon.blue { color:#2e91ff; background:rgba(46,145,255,.12); }
.employee-section-icon.amber { color:#f3a61c; background:rgba(243,166,28,.12); }
.form-two-columns { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.employee-form-span-2 { grid-column:1 / -1; }
.employee-form-control { display:flex; flex-direction:column; gap:6px; color:var(--text-soft); font-size:12.5px; }
.employee-form-control > span { color:var(--text-soft); font-weight:650; }
.employee-form-control b { color:var(--accent); }
.employee-form-control input,
.employee-form-control select {
    width:100%;
    min-height:42px;
    padding:0 11px;
    border:1px solid var(--border);
    border-radius:7px;
    color:var(--text);
    background:var(--input-bg, var(--panel-2));
    outline:none;
}
.employee-form-control input:focus,
.employee-form-control select:focus { border-color:color-mix(in srgb, var(--accent) 68%, var(--border)); box-shadow:0 0 0 3px var(--accent-soft); }
.employee-form-control input:disabled { color:var(--muted); background:var(--panel-hover); cursor:not-allowed; }
.employee-form-control small { color:var(--muted); line-height:1.4; }
.employee-form-control .field-error { color:#ff5c64; }
.employee-form-errors { padding:13px 15px; border:1px solid color-mix(in srgb, #ff4d55 38%, var(--border)); border-radius:8px; color:#ff5c64; background:color-mix(in srgb, #ff4d55 8%, var(--panel)); font-size:12.5px; }
.employee-form-errors strong { display:block; margin-bottom:5px; }
.employee-form-errors ul { margin:0; padding-left:18px; }
.employee-form-actions { padding:13px 16px; display:flex; justify-content:flex-end; gap:10px; }
.employee-form-actions svg,
.employee-profile-actions svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.employee-inline-note { margin:0 0 14px; padding:11px 13px; border-radius:8px; font-size:12.5px; line-height:1.45; }
.employee-inline-note.warning { color:#d99511; background:rgba(243,166,28,.09); border:1px solid rgba(243,166,28,.22); }
.employee-inline-note.danger { color:#ff5c64; background:rgba(255,77,85,.08); border:1px solid rgba(255,77,85,.22); }

.employee-profile-hero { padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; }
.employee-profile-main { display:flex; align-items:center; gap:15px; min-width:0; }
.employee-profile-avatar { width:62px; height:62px; border-radius:50%; display:grid; place-items:center; flex:none; color:#dcecff; background:linear-gradient(145deg,#1c4b77,#6748bb); font-size:20px; font-weight:800; }
.employee-profile-copy { min-width:0; }
.employee-profile-titleline { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.employee-profile-titleline h1 { margin:0; font-size:24px; }
.employee-profile-copy > p { margin:5px 0 8px; color:var(--muted); font-size:12.5px; }
.employee-profile-meta { display:flex; flex-wrap:wrap; gap:14px; color:var(--text-soft); font-size:12.5px; }
.employee-profile-meta span { display:inline-flex; align-items:center; gap:6px; }
.employee-profile-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.danger-button { min-height:42px; padding:0 15px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid rgba(255,77,85,.42); border-radius:7px; color:#ff5b63; background:rgba(255,77,85,.06); cursor:pointer; font-weight:650; }
.danger-button:hover { background:rgba(255,77,85,.12); }
.danger-button.solid { color:#fff; border-color:#ff4d55; background:linear-gradient(135deg,#ef4149,#ff5962); }

.employee-detail-grid { display:grid; grid-template-columns:minmax(300px,.75fr) minmax(480px,1.25fr); gap:14px; margin-bottom:14px; }
.employee-detail-card,
.employee-activity-card { padding:17px; }
.employee-detail-list { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
.employee-detail-list div { padding:10px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 68%, transparent); }
.employee-detail-list dt { margin-bottom:4px; color:var(--muted); font-size:12.5px; }
.employee-detail-list dd { margin:0; color:var(--text); font-size:12.5px; word-break:break-word; }
.coverage-pill { padding:5px 8px; border-radius:999px; color:#2ad46c; background:rgba(35,210,105,.1); font-size:12.5px; }
.employee-activity-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.employee-activity-metrics article { position:relative; padding:13px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb, var(--panel-2) 60%, transparent); }
.employee-activity-metrics small { display:block; margin-bottom:7px; padding-left:11px; color:var(--muted); font-size:12px; }
.employee-activity-metrics strong { color:var(--text); font-size:14px; }
.mini-dot { position:absolute; top:16px; left:12px; width:6px; height:6px; border-radius:50%; }
.mini-dot.green { background:#24d46a; }.mini-dot.amber { background:#f3a61c; }.mini-dot.red { background:#ff4d55; }.mini-dot.purple { background:#8a62e8; }
.employee-activity-times { margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.employee-activity-times div { padding:10px 12px; border-radius:8px; background:var(--panel-hover); }
.employee-activity-times span { display:block; margin-bottom:4px; color:var(--muted); font-size:12px; }
.employee-activity-times strong { color:var(--text); font-size:12.5px; }
.employee-disclaimer { margin:12px 0 0; padding-top:10px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; line-height:1.45; }
.employee-card-empty { min-height:150px; display:grid; place-items:center; padding:20px; color:var(--muted); text-align:center; font-size:12.5px; }
.employee-card-empty.compact { min-height:90px; }

.employee-related-panel { padding:0; overflow:hidden; margin-bottom:14px; }
.employee-related-header { min-height:64px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid var(--border); }
.employee-related-header h2 { margin:0 0 3px; font-size:14px; }
.employee-related-header span { color:var(--muted); font-size:12.5px; line-height:1.4; }
.employee-related-table-wrap { width:100%; overflow:auto; }
.employee-related-table { width:100%; min-width:720px; border-collapse:collapse; font-size:12.5px; }
.employee-related-table th { padding:10px 13px; color:var(--muted); text-align:left; font-weight:550; background:color-mix(in srgb,var(--panel-2) 60%,transparent); border-bottom:1px solid var(--border); }
.employee-related-table td { padding:11px 13px; color:var(--text-soft); border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); vertical-align:middle; }
.employee-related-table tbody tr:last-child td { border-bottom:0; }
.employee-related-table td strong { color:var(--text); }
.employee-related-table td small { display:block; max-width:230px; margin-top:3px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.employee-inline-actions { display:flex; align-items:center; gap:6px; }
.employee-inline-actions form { margin:0; }
.small-action-button { min-height:30px; padding:0 9px; border:1px solid var(--border); border-radius:6px; color:var(--text-soft); background:transparent; font-size:12px; cursor:pointer; }
.small-action-button:hover { color:var(--text); background:var(--panel-hover); }
.small-action-button.danger { color:#ff5b63; border-color:rgba(255,77,85,.28); }

.employee-dialog { width:min(480px,calc(100vw - 32px)); padding:22px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:var(--panel); box-shadow:0 24px 70px rgba(0,0,0,.38); }
.employee-dialog::backdrop { background:rgba(3,10,19,.66); backdrop-filter:blur(3px); }
.employee-dialog-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#ff5b63; background:rgba(255,77,85,.1); }
.employee-dialog-icon svg { width:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.employee-dialog h2 { margin:14px 0 7px; font-size:18px; }
.employee-dialog > form > p { margin:0 0 16px; color:var(--muted); font-size:12.5px; line-height:1.55; }
.employee-dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }

@media (max-width: 1080px) {
    .employee-form-grid,
    .employee-detail-grid { grid-template-columns:1fr; }
    .employee-activity-metrics { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 700px) {
    .employee-profile-hero { align-items:flex-start; flex-direction:column; }
    .employee-profile-actions { width:100%; justify-content:flex-start; }
    .form-two-columns,
    .employee-detail-list,
    .employee-activity-times { grid-template-columns:1fr; }
    .employee-form-span-2 { grid-column:auto; }
    .employee-activity-metrics { grid-template-columns:1fr 1fr; }
    .employee-form-actions { flex-direction:column-reverse; }
    .employee-form-actions .secondary-button,
    .employee-form-actions .primary-button { width:100%; }
}

/* =========================================================
   FASE 5.1 — INVENTARIO DE ACTIVOS
   ========================================================= */
.assets-heading { margin-bottom:14px; }
.assets-metrics { margin-bottom:12px; }
.metric-grid.five { grid-template-columns:repeat(5,minmax(0,1fr)); }

.asset-filterbar {
    display:grid;
    grid-template-columns:repeat(5,minmax(130px,.72fr)) minmax(260px,1.55fr) auto auto;
    gap:9px;
    align-items:end;
    margin-bottom:12px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--panel);
}
.asset-search { position:relative; display:block; }
.asset-search input {
    width:100%;
    min-height:39px;
    padding:0 40px 0 12px;
    border:1px solid var(--border);
    border-radius:7px;
    color:var(--text);
    background:var(--input-bg,var(--panel-2));
    outline:none;
}
.asset-search input:focus { border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); box-shadow:0 0 0 3px var(--accent-soft); }
.asset-search svg { position:absolute; right:12px; bottom:10px; width:17px; fill:none; stroke:var(--muted); stroke-width:1.8; }

.assets-layout { display:grid; grid-template-columns:minmax(0,1fr) 285px; gap:12px; align-items:start; }
.asset-inventory-panel { padding:0; overflow:hidden; }
.asset-directory-header {
    min-height:58px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid var(--border);
}
.asset-directory-header h2 { display:inline; margin:0; font-size:14px; }
.asset-directory-header > div > span { margin-left:8px; color:var(--muted); font-size:12.5px; }
.asset-directory-header .primary-button { min-height:38px; gap:7px; }
.asset-directory-header .primary-button svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.asset-directory-header .primary-button:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }

.asset-table-wrap { width:100%; overflow:auto; }
.asset-table { width:100%; min-width:1280px; border-collapse:collapse; font-size:12.5px; }
.asset-table th {
    padding:10px 11px;
    color:var(--muted);
    text-align:left;
    font-weight:550;
    white-space:nowrap;
    background:color-mix(in srgb,var(--panel-2) 60%,transparent);
    border-bottom:1px solid var(--border);
}
.asset-table td { padding:10px 11px; color:var(--text-soft); border-bottom:1px solid color-mix(in srgb,var(--border) 68%,transparent); vertical-align:middle; }
.asset-table tbody tr:hover { background:var(--panel-hover); }
.asset-table tbody tr:last-child td { border-bottom:0; }
.asset-table td strong { color:var(--text); }
.asset-identity { display:flex; align-items:center; gap:9px; min-width:150px; }
.asset-identity > div { min-width:0; }
.asset-identity strong { display:block; color:#3594ff; font-size:12.5px; }
.asset-identity span:not(.asset-type-icon) { display:block; margin-top:3px; max-width:145px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.asset-type-icon { width:27px; height:27px; flex:none; display:grid; place-items:center; border-radius:7px; color:#5d9eff; background:rgba(54,145,255,.10); }
.asset-type-icon.printer { color:#8e72ef; background:rgba(142,114,239,.11); }
.asset-type-icon svg { width:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.asset-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; }
.asset-employee-cell strong { display:block; font-size:12.5px; }
.asset-employee-cell span { display:block; margin-top:2px; color:var(--muted); font-size:12px; }
.muted-cell { color:var(--muted); }
.asset-agent-status { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.asset-agent-status i { width:7px; height:7px; border-radius:50%; background:#7c8999; box-shadow:0 0 0 3px rgba(124,137,153,.08); }
.asset-agent-status.online i { background:#20cf68; box-shadow:0 0 0 3px rgba(32,207,104,.08); }
.asset-agent-status.delayed i { background:#f3a61c; box-shadow:0 0 0 3px rgba(243,166,28,.08); }
.asset-agent-status.offline i { background:#ff5159; box-shadow:0 0 0 3px rgba(255,81,89,.08); }
.asset-actions-column { width:52px; text-align:center!important; }
.asset-actions-column .row-menu-button:disabled { opacity:.45; cursor:not-allowed; }
.asset-empty-state { min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--muted); text-align:center; }
.asset-empty-state strong { color:var(--text); font-size:14px; }
.asset-empty-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#5d9eff; background:rgba(54,145,255,.1); }
.asset-empty-icon svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.7; }

.asset-table-footer {
    min-height:51px;
    padding:9px 13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    color:var(--muted);
    font-size:12.5px;
    border-top:1px solid var(--border);
}
.asset-pagination-controls { display:flex; align-items:center; gap:17px; }

.assets-side-column { display:flex; flex-direction:column; gap:12px; }
.asset-warranty-panel, .asset-type-panel, .asset-next-phase { padding:14px; }
.assets-side-column .panel-heading { margin-bottom:10px; }
.assets-side-column .panel-heading h2 { font-size:14px; }
.warranty-item { display:grid; grid-template-columns:8px minmax(0,1fr); gap:9px; padding:10px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent); }
.warranty-item:last-child { border-bottom:0; }
.warranty-dot { width:7px; height:7px; margin-top:4px; border-radius:50%; background:#f3a61c; box-shadow:0 0 0 3px rgba(243,166,28,.08); }
.warranty-item strong { display:block; color:var(--text); font-size:12.5px; }
.warranty-item span { display:block; margin-top:3px; color:var(--text-soft); font-size:12px; }
.warranty-item small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.asset-side-empty { min-height:86px; display:grid; place-items:center; padding:12px; text-align:center; font-size:12.5px; }

.asset-type-summary { display:grid; grid-template-columns:108px minmax(0,1fr); align-items:center; gap:13px; }
.asset-type-donut {
    width:102px;
    aspect-ratio:1;
    position:relative;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:conic-gradient(#378cff 0 var(--desktop), #2acb6c var(--desktop) calc(var(--desktop) + var(--laptop)), #f3a61c calc(var(--desktop) + var(--laptop)) 100%);
}
.asset-type-donut::after { content:""; position:absolute; inset:14px; border-radius:50%; background:var(--panel); }
.asset-type-donut > div { position:relative; z-index:1; text-align:center; }
.asset-type-donut strong { display:block; color:var(--text); font-size:18px; }
.asset-type-donut span { display:block; margin-top:1px; color:var(--muted); font-size:12px; }
.asset-type-legend { display:flex; flex-direction:column; gap:9px; }
.asset-type-legend > div { display:grid; grid-template-columns:7px 1fr auto; align-items:center; gap:7px; color:var(--text-soft); font-size:12px; }
.asset-type-legend i { width:7px; height:7px; border-radius:50%; background:#378cff; }
.asset-type-legend i.laptop { background:#2acb6c; }
.asset-type-legend i.printer { background:#f3a61c; }
.asset-type-legend strong { color:var(--text); }
.asset-next-phase { border-style:dashed; }
.asset-next-phase strong { color:var(--text); font-size:12.5px; }
.asset-next-phase p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }

@media (max-width: 1450px) {
    .asset-filterbar { grid-template-columns:repeat(3,minmax(130px,1fr)); }
    .asset-search { grid-column:span 2; }
}
@media (max-width: 1180px) {
    .metric-grid.five { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .assets-layout { grid-template-columns:1fr; }
    .assets-side-column { display:grid; grid-template-columns:1fr 1fr; }
    .asset-next-phase { grid-column:1 / -1; }
}
@media (max-width: 780px) {
    .metric-grid.five { grid-template-columns:1fr 1fr; }
    .asset-filterbar { grid-template-columns:1fr 1fr; }
    .asset-search { grid-column:1 / -1; }
    .asset-table-footer { align-items:flex-start; flex-direction:column; }
    .asset-pagination-controls { width:100%; justify-content:space-between; }
    .assets-side-column { grid-template-columns:1fr; }
    .asset-next-phase { grid-column:auto; }
}
@media (max-width: 520px) {
    .metric-grid.five { grid-template-columns:1fr; }
    .asset-filterbar { grid-template-columns:1fr; }
    .asset-search { grid-column:auto; }
    .asset-type-summary { grid-template-columns:1fr; justify-items:center; }
    .asset-type-legend { width:100%; }
}

/* =========================================================
   FASE 5.2 — CICLO DE VIDA Y DETALLE DE ACTIVOS
   ========================================================= */
.asset-code-link { color:inherit; text-decoration:none; }
.asset-code-link:hover { color:#3594ff; text-decoration:underline; }
.asset-directory-header .primary-button { text-decoration:none; }

.asset-flash {
    margin:0 0 14px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:8px;
    font-size:12.5px;
    line-height:1.45;
}
.asset-flash.success { color:#24b966; background:color-mix(in srgb,#1fc768 10%,var(--panel)); border-color:color-mix(in srgb,#1fc768 34%,var(--border)); }
.asset-flash.error { color:#ff5c64; background:color-mix(in srgb,#ff4d55 9%,var(--panel)); border-color:color-mix(in srgb,#ff4d55 34%,var(--border)); }

.asset-subpage-heading { margin-bottom:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.asset-subpage-heading h1 { margin:7px 0 4px; font-size:25px; }
.asset-subpage-heading p { margin:0; color:var(--muted); font-size:12.5px; }
.asset-breadcrumb, .asset-detail-breadcrumb a { color:var(--accent); font-size:12.5px; text-decoration:none; }
.asset-detail-breadcrumb { margin-bottom:12px; display:flex; gap:7px; align-items:center; color:var(--muted); font-size:12.5px; }

.asset-editor-form { display:flex; flex-direction:column; gap:14px; }
.asset-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.asset-form-section { padding:18px; }
.asset-form-grid > .asset-form-section:nth-child(3),
.asset-form-grid > .asset-document-required-section { grid-column:1 / -1; }
.asset-section-heading { display:flex; align-items:center; gap:11px; padding-bottom:15px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.asset-section-heading h2 { margin:0 0 3px; font-size:15px; }
.asset-section-heading p { margin:0; color:var(--muted); font-size:12.5px; }
.asset-section-icon { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none; }
.asset-section-icon svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.asset-section-icon.blue { color:#2e91ff; background:rgba(46,145,255,.12); }
.asset-section-icon.purple { color:#8a62e8; background:rgba(138,98,232,.12); }
.asset-section-icon.amber { color:#f3a61c; background:rgba(243,166,28,.12); }
.asset-section-icon.red { color:#ff525a; background:rgba(255,82,90,.1); }
.asset-form-two-columns { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.asset-form-span-2 { grid-column:1 / -1; }
.asset-form-control { display:flex; flex-direction:column; gap:6px; color:var(--text-soft); font-size:12.5px; }
.asset-form-control > span, .asset-form-static > span { color:var(--text-soft); font-weight:650; }
.asset-form-control b { color:var(--accent); }
.asset-form-control input,
.asset-form-control select,
.asset-form-control textarea {
    width:100%;
    min-height:42px;
    padding:0 11px;
    border:1px solid var(--border);
    border-radius:7px;
    color:var(--text);
    background:var(--input-bg,var(--panel-2));
    outline:none;
    font:inherit;
}
.asset-form-control textarea { min-height:92px; padding:10px 11px; resize:vertical; }
.asset-form-control input[type="file"] { padding:8px 10px; }
.asset-form-control input:focus,
.asset-form-control select:focus,
.asset-form-control textarea:focus { border-color:color-mix(in srgb,var(--accent) 68%,var(--border)); box-shadow:0 0 0 3px var(--accent-soft); }
.asset-form-control input:disabled { color:var(--muted); background:var(--panel-hover); cursor:not-allowed; }
.asset-form-control small, .asset-form-static small { color:var(--muted); line-height:1.4; }
.asset-form-control .field-error { color:#ff5c64; }
.asset-form-static { min-height:42px; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:8px 11px; border:1px solid var(--border); border-radius:7px; background:var(--panel-hover); font-size:12.5px; }
.asset-form-static strong { color:#27c868; }
.asset-form-errors { grid-column:1 / -1; padding:13px 15px; border:1px solid color-mix(in srgb,#ff4d55 38%,var(--border)); border-radius:8px; color:#ff5c64; background:color-mix(in srgb,#ff4d55 8%,var(--panel)); font-size:12.5px; }
.asset-form-errors strong { display:block; margin-bottom:5px; }
.asset-form-errors ul { margin:0; padding-left:18px; }
.asset-form-actions { padding:13px 16px; display:flex; justify-content:flex-end; gap:10px; }
.asset-form-actions svg, .asset-profile-actions svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.asset-inline-note { margin:0 0 14px; padding:11px 13px; border-radius:8px; font-size:12.5px; line-height:1.45; }
.asset-inline-note.danger { color:#ff5c64; background:rgba(255,77,85,.08); border:1px solid rgba(255,77,85,.22); }

.asset-profile-hero { padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; }
.asset-profile-main { display:flex; align-items:center; gap:16px; min-width:0; }
.asset-profile-icon { width:70px; height:70px; border-radius:18px; display:grid; place-items:center; flex:none; color:#3c97ff; background:rgba(50,139,255,.11); }
.asset-profile-icon svg { width:36px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.asset-profile-copy { min-width:0; }
.asset-profile-titleline { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.asset-profile-titleline h1 { margin:0; font-size:25px; }
.asset-profile-statusline { display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-top:8px; }
.asset-profile-context { display:flex; flex-wrap:wrap; gap:26px; margin-top:13px; }
.asset-profile-context div { min-width:130px; }
.asset-profile-context span { display:block; margin-bottom:3px; color:var(--muted); font-size:12px; }
.asset-profile-context strong { color:var(--text); font-size:12.5px; }
.asset-profile-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.asset-profile-actions .secondary-button { text-decoration:none; }

.asset-detail-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.asset-summary-card { padding:14px; display:flex; align-items:center; gap:11px; }
.asset-summary-icon { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none; }
.asset-summary-icon svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.asset-summary-icon.blue { color:#3b94ff; background:rgba(59,148,255,.12); }
.asset-summary-icon.green { color:#23ce69; background:rgba(35,206,105,.12); }
.asset-summary-icon.amber { color:#f3a61c; background:rgba(243,166,28,.12); }
.asset-summary-icon.purple { color:#8a62e8; background:rgba(138,98,232,.12); }
.asset-summary-card small { display:block; margin-bottom:4px; color:var(--muted); font-size:12px; }
.asset-summary-card strong { color:var(--text); font-size:13px; }

.asset-detail-grid { display:grid; grid-template-columns:minmax(330px,.75fr) minmax(520px,1.25fr); gap:14px; margin-bottom:14px; }
.asset-detail-card { padding:17px; }
.asset-detail-heading { padding-bottom:12px; margin-bottom:3px; border-bottom:1px solid var(--border); }
.asset-detail-heading h2 { margin:0; font-size:14px; }
.asset-detail-list { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
.asset-detail-list div { padding:9px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 68%,transparent); }
.asset-detail-list dt { margin-bottom:4px; color:var(--muted); font-size:12px; }
.asset-detail-list dd { margin:0; color:var(--text); font-size:12.5px; word-break:break-word; }
.asset-detail-list.technical { grid-template-columns:1fr 1fr; }
.asset-notes { margin-top:12px; padding:11px; border-radius:8px; background:var(--panel-hover); }
.asset-notes span { color:var(--muted); font-size:12px; }
.asset-notes p { margin:5px 0 0; color:var(--text-soft); font-size:12.5px; line-height:1.5; white-space:pre-wrap; }

.asset-related-panel { padding:0; overflow:hidden; margin-bottom:14px; }
.asset-related-header { min-height:54px; padding:12px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border); }
.asset-related-header h2 { margin:0 0 3px; font-size:14px; }
.asset-related-header span { color:var(--muted); font-size:12px; }
.asset-related-table-wrap { overflow:auto; }
.asset-related-table { width:100%; min-width:760px; border-collapse:collapse; font-size:12.5px; }
.asset-related-table th { padding:9px 12px; color:var(--muted); text-align:left; font-weight:550; background:color-mix(in srgb,var(--panel-2) 60%,transparent); border-bottom:1px solid var(--border); white-space:nowrap; }
.asset-related-table td { padding:10px 12px; color:var(--text-soft); border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); vertical-align:middle; }
.asset-related-table tr:last-child td { border-bottom:0; }
.asset-related-table td strong { display:block; color:var(--text); }
.asset-related-table td small { display:block; margin-top:2px; color:var(--muted); font-size:12px; }
.asset-card-empty { min-height:92px; display:grid; place-items:center; padding:16px; color:var(--muted); text-align:center; font-size:12.5px; }

.asset-history-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.asset-compact-list { padding:0 14px; }
.asset-compact-list article { min-height:58px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(160px,.8fr) auto; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); }
.asset-compact-list article:last-child { border-bottom:0; }
.asset-compact-list article > div strong { display:block; color:var(--text); font-size:12.5px; }
.asset-compact-list article > div span, .asset-compact-list article > div small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.asset-cost { color:#27c868; font-size:12.5px; font-weight:650; }

.asset-dialog { width:min(470px,calc(100vw - 28px)); padding:0; border:1px solid var(--border); border-radius:12px; color:var(--text); background:var(--panel); box-shadow:0 24px 80px rgba(0,0,0,.35); }
.asset-dialog::backdrop { background:rgba(3,10,18,.64); backdrop-filter:blur(2px); }
.asset-dialog form { padding:22px; }
.asset-dialog-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#ff5b63; background:rgba(255,77,85,.1); }
.asset-dialog-icon svg { width:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.asset-dialog h2 { margin:14px 0 7px; font-size:18px; }
.asset-dialog > form > p { margin:0 0 16px; color:var(--muted); font-size:12.5px; line-height:1.55; }
.asset-dialog .asset-form-control + .asset-form-control { margin-top:12px; }
.asset-dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }

@media (max-width: 1100px) {
    .asset-form-grid, .asset-detail-grid, .asset-history-grid { grid-template-columns:1fr; }
    .asset-form-grid > .asset-form-section:nth-child(3), .asset-form-grid > .asset-document-required-section { grid-column:auto; }
    .asset-detail-summary-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 700px) {
    .asset-profile-hero { align-items:flex-start; flex-direction:column; }
    .asset-profile-actions { width:100%; justify-content:flex-start; }
    .asset-form-two-columns, .asset-detail-list, .asset-detail-list.technical { grid-template-columns:1fr; }
    .asset-form-span-2 { grid-column:auto; }
    .asset-form-actions { flex-direction:column-reverse; }
    .asset-form-actions .secondary-button, .asset-form-actions .primary-button { width:100%; }
    .asset-compact-list article { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
    .asset-detail-summary-grid { grid-template-columns:1fr; }
    .asset-profile-context { flex-direction:column; gap:9px; }
}

/* =========================================================
   FASE 6.1 — DIRECTORIO Y CICLO DE ASIGNACIONES
   ========================================================= */
.assignments-heading { align-items:flex-end; }
.assignments-heading-actions { display:flex; gap:9px; }
.assignments-heading-actions svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.assignments-heading-actions button:disabled { opacity:.55; cursor:not-allowed; }

.assignment-metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.assignment-metric-grid .metric-card { min-width:0; }

.assignment-filterbar {
    display:grid;
    grid-template-columns:minmax(120px,.8fr) minmax(120px,.8fr) minmax(150px,1fr) minmax(130px,.8fr) minmax(150px,1fr) minmax(240px,1.6fr) auto auto;
    gap:9px;
    align-items:end;
    padding:10px;
    margin-bottom:14px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--panel);
}
.assignment-search { position:relative; align-self:end; }
.assignment-search input { width:100%; min-height:38px; padding:0 36px 0 12px; border:1px solid var(--border); border-radius:7px; color:var(--text); background:var(--input-bg,var(--panel-2)); outline:none; font-size:12.5px; }
.assignment-search input:focus { border-color:color-mix(in srgb,var(--accent) 65%,var(--border)); box-shadow:0 0 0 3px var(--accent-soft); }
.assignment-search svg { width:15px; position:absolute; top:50%; right:12px; transform:translateY(-50%); fill:none; stroke:var(--muted); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }

.assignments-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:14px; align-items:start; }
.assignment-lifecycle-panel { padding:0; overflow:hidden; }
.assignment-directory-header { min-height:58px; padding:12px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border); }
.assignment-directory-header h2 { display:inline; margin:0; font-size:14px; }
.assignment-directory-header span { margin-left:7px; color:var(--muted); font-size:12px; }
.assignment-table-wrap { overflow:auto; }
.assignment-table { width:100%; min-width:1120px; border-collapse:collapse; font-size:12px; }
.assignment-table th { padding:10px 11px; color:var(--muted); text-align:left; font-weight:550; white-space:nowrap; background:color-mix(in srgb,var(--panel-2) 62%,transparent); border-bottom:1px solid var(--border); }
.assignment-table td { padding:10px 11px; color:var(--text-soft); vertical-align:middle; border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); }
.assignment-table tbody tr:last-child td { border-bottom:0; }
.assignment-table tbody tr:hover { background:var(--panel-hover); }
.assignment-table tbody tr.is-overdue { background:color-mix(in srgb,#ff4d55 4%,transparent); }
.assignment-actions-column { width:58px; text-align:center!important; }

.assignment-asset-cell, .assignment-person-cell { min-width:0; }
.assignment-asset-cell { display:flex; align-items:center; gap:9px; }
.assignment-device-icon { width:27px; height:27px; flex:none; display:grid; place-items:center; border-radius:7px; color:#5d9eff; background:rgba(54,145,255,.1); }
.assignment-device-icon svg { width:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.assignment-asset-cell strong, .assignment-person-cell strong { display:block; color:var(--text); font-size:12.5px; }
.assignment-asset-cell a, .assignment-person-cell a { color:inherit; text-decoration:none; }
.assignment-asset-cell a:hover strong, .assignment-person-cell a:hover strong { color:#3594ff; }
.assignment-asset-cell span, .assignment-person-cell span { display:block; margin-top:2px; color:var(--muted); font-size:12px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.assignment-due-cell span { display:block; white-space:nowrap; }
.assignment-due-cell small { display:block; margin-top:3px; font-size:12px; }
.assignment-due-cell.upcoming small { color:#2f8ef6; }
.assignment-due-cell.overdue small { color:#ff535b; font-weight:650; }
.assignment-empty { min-height:175px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--muted); text-align:center; }
.assignment-empty strong { color:var(--text); font-size:14px; }
.row-action-popover button { width:100%; padding:8px 10px; border:0; color:var(--muted); background:transparent; text-align:left; font:inherit; cursor:not-allowed; }

.assignments-side-column { display:flex; flex-direction:column; gap:12px; }
.assignment-side-panel { padding:0 13px; overflow:hidden; }
.assignment-side-heading { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid color-mix(in srgb,var(--border) 66%,transparent); }
.assignment-side-heading h2 { margin:0; font-size:13px; }
.assignment-side-heading span { color:var(--accent); font-size:12px; }
.assignment-side-item { display:grid; grid-template-columns:7px minmax(0,1fr) auto; grid-template-areas:"dot main date" "dot main badge"; align-items:center; gap:3px 8px; padding:10px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent); }
.assignment-side-item:last-child { border-bottom:0; }
.assignment-side-item > i { grid-area:dot; width:7px; height:7px; align-self:start; margin-top:4px; border-radius:50%; background:#2f8ef6; }
.assignment-side-item.upcoming > i { background:#f3a61c; }
.assignment-side-item.overdue > i { background:#ff5159; }
.assignment-side-item > div { grid-area:main; min-width:0; }
.assignment-side-item strong { display:block; color:var(--text); font-size:12px; }
.assignment-side-item span { display:block; margin-top:2px; max-width:125px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; }
.assignment-side-item time { grid-area:date; color:var(--text-soft); font-size:12px; white-space:nowrap; }
.assignment-side-item b { grid-area:badge; justify-self:end; padding:2px 5px; border-radius:4px; color:#378cff; background:rgba(55,140,255,.09); font-size:12px; font-weight:650; }
.assignment-side-item.overdue b { color:#ff5159; background:rgba(255,81,89,.09); }
.assignment-side-empty { min-height:84px; display:grid; place-items:center; padding:12px; color:var(--muted); text-align:center; font-size:12px; line-height:1.5; }

.assignment-distribution-panel { padding-bottom:14px; }
.assignment-distribution { display:grid; grid-template-columns:105px minmax(0,1fr); align-items:center; gap:12px; padding-top:13px; }
.assignment-donut { width:100px; aspect-ratio:1; position:relative; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#26c969 0 var(--active), #f3a61c var(--active) calc(var(--active) + var(--delivery)), #8a62e8 calc(var(--active) + var(--delivery)) calc(var(--active) + var(--delivery) + var(--return)), #378cff calc(var(--active) + var(--delivery) + var(--return)) calc(var(--active) + var(--delivery) + var(--return) + var(--completed)), #7c8999 calc(var(--active) + var(--delivery) + var(--return) + var(--completed)) 100%); }
.assignment-donut::after { content:""; position:absolute; inset:14px; border-radius:50%; background:var(--panel); }
.assignment-donut > div { position:relative; z-index:1; text-align:center; }
.assignment-donut strong { display:block; color:var(--text); font-size:17px; }
.assignment-donut span { display:block; color:var(--muted); font-size:12px; }
.assignment-legend { display:flex; flex-direction:column; gap:7px; }
.assignment-legend > div { display:grid; grid-template-columns:7px minmax(0,1fr) auto; align-items:center; gap:6px; color:var(--text-soft); font-size:12px; }
.assignment-legend i { width:7px; height:7px; border-radius:50%; background:#7c8999; }
.assignment-legend .status-active i { background:#26c969; }
.assignment-legend .status-pending-delivery i { background:#f3a61c; }
.assignment-legend .status-pending-return i { background:#8a62e8; }
.assignment-legend .status-completed i { background:#378cff; }
.assignment-legend strong { color:var(--text); }
.assignment-next-phase { padding:14px; border-style:dashed; }
.assignment-next-phase strong { color:var(--text); font-size:12.5px; }
.assignment-next-phase p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }

@media (max-width: 1480px) {
    .assignment-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .assignment-filterbar { grid-template-columns:repeat(3,minmax(130px,1fr)); }
    .assignment-search { grid-column:span 2; }
}
@media (max-width: 1180px) {
    .assignments-layout { grid-template-columns:1fr; }
    .assignments-side-column { display:grid; grid-template-columns:1fr 1fr; }
    .assignment-distribution-panel, .assignment-next-phase { grid-column:1 / -1; }
}
@media (max-width: 760px) {
    .assignments-heading { align-items:flex-start; flex-direction:column; }
    .assignments-heading-actions { width:100%; }
    .assignment-metric-grid { grid-template-columns:1fr 1fr; }
    .assignment-filterbar { grid-template-columns:1fr 1fr; }
    .assignment-search { grid-column:1 / -1; }
    .assignments-side-column { grid-template-columns:1fr; }
    .assignment-distribution-panel, .assignment-next-phase { grid-column:auto; }
}
@media (max-width: 520px) {
    .assignment-metric-grid, .assignment-filterbar { grid-template-columns:1fr; }
    .assignment-search { grid-column:auto; }
    .assignments-heading-actions { flex-direction:column; }
    .assignments-heading-actions button { width:100%; }
    .assignment-distribution { grid-template-columns:1fr; justify-items:center; }
    .assignment-legend { width:100%; }
}

/* =========================================================
   FASE 6.2 — GESTIÓN COMPLETA DE ASIGNACIONES
   ========================================================= */
.assignments-heading-actions .primary-button { text-decoration:none; gap:7px; }
.row-action-popover form { margin:0; }
.row-action-popover form button { width:100%; padding:8px 9px; border:0; border-radius:6px; color:var(--text-soft); background:transparent; text-align:left; font:inherit; font-size:12.5px; cursor:pointer; }
.row-action-popover form button:hover { color:var(--text); background:var(--panel-hover); }
.row-action-popover form button.danger { color:#ff5b63; }
.assignment-enabled-flow { border-color:color-mix(in srgb,#26c969 32%,var(--border)); background:color-mix(in srgb,#26c969 4%,var(--panel)); }

.assignment-subpage-heading { margin-bottom:18px; }
.assignment-subpage-heading h1 { margin:7px 0 4px; font-size:25px; }
.assignment-subpage-heading p { margin:0; color:var(--muted); font-size:12.5px; }
.assignment-breadcrumb, .assignment-detail-breadcrumb a { color:var(--accent); font-size:12.5px; text-decoration:none; }
.assignment-detail-breadcrumb { margin-bottom:12px; display:flex; gap:7px; align-items:center; color:var(--muted); font-size:12.5px; }
.assignment-editor-form { display:flex; flex-direction:column; gap:14px; }
.assignment-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.assignment-form-section { padding:18px; }
.assignment-form-section-heading { display:flex; align-items:center; gap:11px; padding-bottom:15px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.assignment-form-section-heading h2 { margin:0 0 3px; font-size:15px; }
.assignment-form-section-heading p { margin:0; color:var(--muted); font-size:12.5px; }
.assignment-form-icon { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none; }
.assignment-form-icon svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.assignment-form-icon.blue { color:#2e91ff; background:rgba(46,145,255,.12); }
.assignment-form-icon.amber { color:#f3a61c; background:rgba(243,166,28,.12); }
.assignment-form-two-columns { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.assignment-form-fields { display:flex; flex-direction:column; gap:15px; }
.assignment-form-control { display:flex; flex-direction:column; gap:6px; color:var(--text-soft); font-size:12.5px; }
.assignment-form-control > span { color:var(--text-soft); font-weight:650; }
.assignment-form-control b { color:var(--accent); }
.assignment-form-control input,
.assignment-form-control select,
.assignment-form-control textarea { width:100%; border:1px solid var(--border); border-radius:7px; color:var(--text); background:var(--input-bg,var(--panel-2)); outline:none; font:inherit; }
.assignment-form-control input, .assignment-form-control select { min-height:42px; padding:0 11px; }
.assignment-form-control textarea { padding:11px; resize:vertical; line-height:1.5; }
.assignment-form-control input:focus, .assignment-form-control select:focus, .assignment-form-control textarea:focus { border-color:color-mix(in srgb,var(--accent) 65%,var(--border)); box-shadow:0 0 0 3px var(--accent-soft); }
.assignment-form-control > small:not(.field-error) { color:var(--muted); font-size:12px; }
.assignment-form-control .field-error { color:#ff5b63; font-size:12px; }
.assignment-form-errors { grid-column:1 / -1; padding:13px 15px; border:1px solid color-mix(in srgb,#ff4d55 38%,var(--border)); border-radius:8px; color:#ff5c64; background:color-mix(in srgb,#ff4d55 8%,var(--panel)); font-size:12.5px; }
.assignment-form-errors strong { display:block; margin-bottom:5px; }
.assignment-form-errors ul { margin:0; padding-left:18px; }
.assignment-option-warning { margin-bottom:12px; padding:10px 12px; border:1px solid color-mix(in srgb,#f3a61c 32%,var(--border)); border-radius:7px; color:#d99112; background:color-mix(in srgb,#f3a61c 7%,var(--panel)); font-size:12.5px; }
.assignment-form-actions { padding:13px 16px; display:flex; justify-content:flex-end; gap:10px; }
.assignment-form-actions svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.assignment-form-actions .primary-button:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.assignment-static-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.assignment-static-grid > div { min-height:72px; padding:11px; border:1px solid var(--border); border-radius:8px; background:var(--panel-hover); }
.assignment-static-grid span, .assignment-static-grid small { display:block; color:var(--muted); font-size:12px; }
.assignment-static-grid strong { display:block; margin:6px 0 3px; color:var(--text); font-size:12.5px; }

.assignment-flash { margin-bottom:12px; padding:11px 13px; border:1px solid var(--border); border-radius:8px; font-size:12.5px; line-height:1.45; }
.assignment-flash ul { margin:6px 0 0; padding-left:18px; }
.assignment-flash.success { color:#24b966; background:color-mix(in srgb,#1fc768 10%,var(--panel)); border-color:color-mix(in srgb,#1fc768 34%,var(--border)); }
.assignment-flash.error { color:#ff5c64; background:color-mix(in srgb,#ff4d55 9%,var(--panel)); border-color:color-mix(in srgb,#ff4d55 34%,var(--border)); }
.assignment-profile-hero { padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; }
.assignment-profile-main { display:flex; align-items:center; gap:15px; min-width:0; }
.assignment-profile-icon { width:64px; height:64px; border-radius:17px; display:grid; place-items:center; flex:none; color:#4b96ff; background:rgba(54,145,255,.11); }
.assignment-profile-icon svg { width:31px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.assignment-profile-copy { min-width:0; }
.assignment-profile-titleline { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.assignment-profile-titleline h1 { margin:0; font-size:24px; }
.assignment-profile-person { margin-top:8px; }
.assignment-profile-person strong { display:block; color:var(--text); font-size:12.5px; }
.assignment-profile-person span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.assignment-profile-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; }
.assignment-profile-actions a { text-decoration:none; }
.assignment-terminal-note { margin-bottom:14px; padding:11px 13px; border:1px solid var(--border); border-radius:8px; font-size:12.5px; }
.assignment-terminal-note.completed { color:#25c667; border-color:rgba(37,198,103,.28); background:rgba(37,198,103,.06); }
.assignment-terminal-note.cancelled { color:var(--muted); background:var(--panel-hover); }

.assignment-flow-panel { padding:16px 18px; margin-bottom:14px; }
.assignment-detail-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-bottom:11px; margin-bottom:13px; border-bottom:1px solid var(--border); }
.assignment-detail-heading h2 { margin:0; font-size:14px; }
.assignment-detail-heading > span { color:var(--muted); font-size:12px; }
.assignment-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.assignment-flow-step { position:relative; display:flex; align-items:center; gap:9px; min-height:56px; padding-right:16px; }
.assignment-flow-step:not(:last-child)::after { content:""; position:absolute; top:50%; right:5px; width:calc(100% - 46px); height:2px; transform:translateX(100%); background:var(--border); z-index:0; pointer-events:none; }
.assignment-flow-step i { position:relative; z-index:1; width:29px; height:29px; display:grid; place-items:center; flex:none; border:2px solid var(--border); border-radius:50%; color:var(--muted); background:var(--panel); font-size:12px; font-style:normal; font-weight:700; }
.assignment-flow-step strong { display:block; color:var(--text-soft); font-size:12.5px; }
.assignment-flow-step span { display:block; margin-top:2px; color:var(--muted); font-size:12px; }
.assignment-flow-step.reached i { color:#fff; border-color:#29c76b; background:#29c76b; }
.assignment-flow-step.reached:not(:last-child)::after { background:color-mix(in srgb,#29c76b 58%,var(--border)); }
.assignment-flow-step.current i { box-shadow:0 0 0 4px rgba(41,199,107,.12); }
.assignment-flow.is-cancelled .assignment-flow-step i { border-color:var(--border); color:var(--muted); background:var(--panel); box-shadow:none; }
.assignment-flow.is-cancelled .assignment-flow-step::after { background:var(--border); }

.assignment-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.assignment-detail-card { padding:17px; }
.assignment-detail-list { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.assignment-detail-list div { padding:9px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 66%,transparent); }
.assignment-detail-list dt { margin-bottom:4px; color:var(--muted); font-size:12px; }
.assignment-detail-list dd { margin:0; color:var(--text); font-size:12.5px; }
.assignment-notes { margin-top:12px; padding:11px; border-radius:8px; background:var(--panel-hover); }
.assignment-notes span { color:var(--muted); font-size:12px; }
.assignment-notes p { margin:5px 0 0; color:var(--text-soft); font-size:12.5px; line-height:1.5; white-space:pre-wrap; }
.assignment-resource-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.assignment-resource-grid article { padding:13px; border:1px solid var(--border); border-radius:9px; background:var(--panel-hover); }
.assignment-resource-grid article > span { color:var(--muted); font-size:12px; }
.assignment-resource-grid article strong { display:block; margin:7px 0 4px; color:var(--text); font-size:13px; }
.assignment-resource-grid article small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.assignment-resource-grid article a { display:inline-block; margin-top:10px; color:var(--accent); font-size:12px; text-decoration:none; }
.assignment-return-panel { padding:17px; margin-bottom:14px; }
.assignment-return-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:18px; }
.assignment-return-grid span { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; }
.assignment-return-grid strong, .assignment-return-grid p { margin:0; color:var(--text); font-size:12.5px; line-height:1.5; white-space:pre-wrap; }
.assignment-detail-empty { min-height:74px; display:grid; place-items:center; color:var(--muted); text-align:center; font-size:12.5px; }

.assignment-dialog { width:min(500px,calc(100vw - 28px)); padding:0; border:1px solid var(--border); border-radius:12px; color:var(--text); background:var(--panel); box-shadow:0 24px 80px rgba(0,0,0,.38); }
.assignment-dialog::backdrop { background:rgba(3,10,18,.64); backdrop-filter:blur(2px); }
.assignment-dialog form { padding:22px; }
.assignment-dialog-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:20px; font-weight:800; }
.assignment-dialog-icon.green { color:#26c969; background:rgba(38,201,105,.11); }
.assignment-dialog-icon.amber { color:#f3a61c; background:rgba(243,166,28,.11); }
.assignment-dialog-icon.blue { color:#378cff; background:rgba(55,140,255,.11); }
.assignment-dialog-icon.red { color:#ff535b; background:rgba(255,83,91,.1); }
.assignment-dialog h2 { margin:14px 0 7px; font-size:18px; }
.assignment-dialog > form > p { margin:0 0 16px; color:var(--muted); font-size:12.5px; line-height:1.55; }
.assignment-dialog .assignment-form-control + .assignment-form-control { margin-top:12px; }
.assignment-dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }

@media (max-width: 1000px) {
    .assignment-form-grid, .assignment-detail-grid { grid-template-columns:1fr; }
    .assignment-flow { grid-template-columns:1fr 1fr; gap:10px; }
    .assignment-flow-step::after { display:none; }
}
@media (max-width: 700px) {
    .assignment-profile-hero { align-items:flex-start; flex-direction:column; }
    .assignment-profile-actions { width:100%; justify-content:flex-start; }
    .assignment-form-two-columns, .assignment-static-grid, .assignment-detail-list, .assignment-resource-grid, .assignment-return-grid { grid-template-columns:1fr; }
    .assignment-form-actions { flex-direction:column-reverse; }
    .assignment-form-actions .secondary-button, .assignment-form-actions .primary-button { width:100%; }
}
@media (max-width: 520px) {
    .assignment-flow { grid-template-columns:1fr; }
    .assignment-profile-actions { flex-direction:column; }
    .assignment-profile-actions > * { width:100%; }
}

/* ========================================================================
   Phase 7.1 · Mantenimiento
   ======================================================================== */
.maintenance-heading { align-items:flex-end; }
.maintenance-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.maintenance-heading-actions .secondary-button,
.maintenance-heading-actions .primary-button { min-height:38px; }
.maintenance-heading-actions button:disabled { opacity:.56; cursor:not-allowed; box-shadow:none; }

.maintenance-metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.maintenance-metric-grid .metric-card { min-width:0; }
.maintenance-cost-value { font-size:22px; overflow-wrap:anywhere; }

.maintenance-filterbar { display:grid; grid-template-columns:minmax(130px,.75fr) minmax(150px,.85fr) minmax(145px,.8fr) minmax(165px,.95fr) minmax(240px,1.65fr) auto auto; gap:8px; align-items:end; margin-bottom:14px; padding:10px; border:1px solid var(--border); border-radius:9px; background:var(--panel); }
.maintenance-filterbar .filter-control { min-width:0; }
.maintenance-search { position:relative; display:block; }
.maintenance-search input { width:100%; min-height:38px; padding:0 38px 0 12px; border:1px solid var(--border); border-radius:7px; color:var(--text); background:var(--input-bg,var(--panel-2)); outline:none; font:inherit; }
.maintenance-search input:focus { border-color:color-mix(in srgb,var(--accent) 65%,var(--border)); box-shadow:0 0 0 3px var(--accent-soft); }
.maintenance-search svg { position:absolute; top:50%; right:12px; width:16px; transform:translateY(-50%); fill:none; stroke:var(--muted); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }

.maintenance-layout { display:grid; grid-template-columns:minmax(0,1fr) 275px; gap:14px; align-items:start; }
.maintenance-directory-panel { min-width:0; overflow:visible; }
.maintenance-directory-header { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border-bottom:1px solid var(--border); }
.maintenance-directory-header > div { display:flex; align-items:baseline; gap:9px; }
.maintenance-directory-header h2 { margin:0; font-size:14px; }
.maintenance-directory-header span { color:var(--muted); font-size:12px; }
.maintenance-table-wrap { width:100%; overflow-x:auto; }
.maintenance-table { width:100%; min-width:1080px; border-collapse:collapse; table-layout:auto; }
.maintenance-table th { padding:10px 9px; border-bottom:1px solid var(--border); color:var(--muted); text-align:left; font-size:12px; font-weight:500; white-space:nowrap; }
.maintenance-table td { padding:10px 9px; border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent); color:var(--text-soft); vertical-align:middle; font-size:12px; }
.maintenance-table tbody tr:last-child td { border-bottom:0; }
.maintenance-table tbody tr:hover { background:var(--panel-hover); }
.maintenance-row-overdue { background:color-mix(in srgb,#ff4f57 3%,transparent); }

.maintenance-asset-cell { display:flex; align-items:center; gap:9px; min-width:160px; }
.maintenance-device-icon { width:27px; height:27px; display:grid; place-items:center; flex:none; border-radius:7px; color:#4b96ff; background:rgba(55,140,255,.1); font-size:12.5px; }
.maintenance-asset-cell a, .maintenance-asset-cell strong { display:block; color:var(--text); font-size:12px; font-weight:700; text-decoration:none; }
.maintenance-asset-cell a:hover { color:var(--accent); }
.maintenance-asset-cell small { display:block; margin-top:3px; color:var(--muted); font-size:12px; white-space:nowrap; }
.maintenance-issue-cell { max-width:270px; }
.maintenance-issue-cell strong { display:block; color:var(--text); font-size:12px; }
.maintenance-issue-cell small { display:block; max-width:260px; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.maintenance-issue-cell b { display:block; margin-top:4px; color:#ff565e; font-size:12px; font-weight:600; }
.maintenance-person-cell strong { display:block; color:var(--text-soft); font-size:12px; }
.maintenance-person-cell small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.maintenance-days { font-variant-numeric:tabular-nums; }
.maintenance-days.overdue { color:#ff565e; font-weight:700; }
.maintenance-cost { color:var(--text); font-weight:600; white-space:nowrap; }
.maintenance-table .row-menu-button:disabled { opacity:.46; cursor:not-allowed; }
.maintenance-empty { min-height:145px; display:grid; place-items:center; align-content:center; gap:5px; color:var(--muted); text-align:center; }
.maintenance-empty strong { color:var(--text); font-size:12.5px; }
.maintenance-empty span { font-size:12px; }

.maintenance-side-column { display:grid; gap:12px; min-width:0; }
.maintenance-side-panel { padding:13px; }
.maintenance-side-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.maintenance-side-heading h2 { margin:0; font-size:12.5px; }
.maintenance-side-heading span { color:#ff565e; font-size:12px; }
.maintenance-side-item { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 68%,transparent); }
.maintenance-side-item:last-child { border-bottom:0; }
.maintenance-side-item > i { width:6px; height:6px; border-radius:50%; background:#ff565e; }
.maintenance-side-item div { min-width:0; }
.maintenance-side-item strong { display:block; color:var(--text); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.maintenance-side-item span { display:block; margin-top:2px; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.maintenance-side-item b { color:#ff565e; font-size:12px; font-weight:600; white-space:nowrap; }
.maintenance-side-empty { min-height:86px; display:grid; place-items:center; color:var(--muted); text-align:center; font-size:12px; }

.maintenance-side-cost-total { margin:12px 0 5px; color:var(--text); font-size:22px; font-weight:700; }
.maintenance-cost-panel p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.maintenance-distribution { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; align-items:center; padding-top:13px; }
.maintenance-donut { --open:0%; --progress:0%; --parts:0%; --completed:0%; width:100px; aspect-ratio:1; position:relative; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#ff535b 0 var(--open), #378cff var(--open) calc(var(--open) + var(--progress)), #f3a61c calc(var(--open) + var(--progress)) calc(var(--open) + var(--progress) + var(--parts)), #26c969 calc(var(--open) + var(--progress) + var(--parts)) calc(var(--open) + var(--progress) + var(--parts) + var(--completed)), #7c8999 calc(var(--open) + var(--progress) + var(--parts) + var(--completed)) 100%); }
.maintenance-donut::after { content:""; position:absolute; inset:14px; border-radius:50%; background:var(--panel); }
.maintenance-donut > div { position:relative; z-index:1; text-align:center; }
.maintenance-donut strong { display:block; color:var(--text); font-size:19px; }
.maintenance-donut span { color:var(--muted); font-size:12px; }
.maintenance-legend { display:grid; gap:7px; }
.maintenance-legend > div { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:6px; }
.maintenance-legend i { width:6px; height:6px; border-radius:50%; background:#7c8999; }
.maintenance-legend span, .maintenance-legend strong { font-size:12px; }
.maintenance-legend span { color:var(--text-soft); }
.maintenance-legend strong { color:var(--text); }
.maintenance-legend .status-open i { background:#ff535b; }
.maintenance-legend .status-in-progress i { background:#378cff; }
.maintenance-legend .status-waiting-parts i { background:#f3a61c; }
.maintenance-legend .status-completed i { background:#26c969; }
.maintenance-legend .status-cancelled i { background:#7c8999; }

.maintenance-read-model, .maintenance-next-phase { padding:13px; border-style:dashed; }
.maintenance-read-model strong, .maintenance-next-phase strong { display:block; color:var(--text); font-size:12.5px; }
.maintenance-read-model p, .maintenance-next-phase p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.maintenance-read-model small { display:block; margin-top:8px; color:var(--accent); font-size:12px; }

@media (max-width: 1320px) {
    .maintenance-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .maintenance-filterbar { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .maintenance-search { grid-column:span 2; }
}
@media (max-width: 1050px) {
    .maintenance-layout { grid-template-columns:1fr; }
    .maintenance-side-column { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .maintenance-next-phase, .maintenance-read-model { grid-column:span 1; }
}
@media (max-width: 760px) {
    .maintenance-heading { align-items:flex-start; flex-direction:column; }
    .maintenance-heading-actions { width:100%; justify-content:flex-start; }
    .maintenance-metric-grid { grid-template-columns:1fr 1fr; }
    .maintenance-filterbar { grid-template-columns:1fr 1fr; }
    .maintenance-search { grid-column:1 / -1; }
    .maintenance-side-column { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
    .maintenance-metric-grid, .maintenance-filterbar { grid-template-columns:1fr; }
    .maintenance-heading-actions { flex-direction:column; align-items:stretch; }
    .maintenance-search { grid-column:auto; }
}

/* --------------------------------------------------------------------------
   Maintenance phase 7.2: create/edit/detail and lifecycle actions
   -------------------------------------------------------------------------- */
.dashboard-success { margin:0 0 12px; padding:11px 13px; border:1px solid color-mix(in srgb,#27c66a 42%,var(--border)); border-radius:8px; color:#21b95e; background:color-mix(in srgb,#27c66a 8%,var(--panel)); font-size:12.5px; }
.maintenance-row-link { display:grid; place-items:center; text-decoration:none; }
.maintenance-editor-grid { align-items:start; }
.maintenance-detail-breadcrumbs { margin-bottom:10px; }
.maintenance-detail-breadcrumbs > span { color:var(--muted); font-size:12px; }
.maintenance-detail-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px; padding:16px; }
.maintenance-detail-identity { display:flex; align-items:center; gap:14px; min-width:0; }
.maintenance-detail-icon { width:55px; height:55px; display:grid; place-items:center; flex:none; border-radius:13px; color:#458fff; background:rgba(55,140,255,.12); font-size:18px; }
.maintenance-detail-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.maintenance-detail-title-row h1 { margin:0; color:var(--text); font-size:23px; }
.maintenance-detail-identity > div > strong { display:block; margin-top:5px; color:var(--text-soft); font-size:13px; }
.maintenance-detail-identity p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.maintenance-detail-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.maintenance-terminal-note { margin-bottom:12px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:12px; }
.maintenance-terminal-note.overdue { color:#ff555d; border-color:color-mix(in srgb,#ff4f57 38%,var(--border)); background:color-mix(in srgb,#ff4f57 7%,var(--panel)); }
.maintenance-terminal-note.completed { color:#25c668; border-color:color-mix(in srgb,#25c668 38%,var(--border)); background:color-mix(in srgb,#25c668 7%,var(--panel)); }
.maintenance-terminal-note.cancelled { color:var(--muted); background:var(--panel-2); }
.maintenance-detail-summary-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.maintenance-detail-stat { min-width:0; padding:12px; }
.maintenance-detail-stat span { display:block; color:var(--muted); font-size:12px; }
.maintenance-detail-stat strong { display:block; margin-top:6px; color:var(--text); font-size:12.5px; overflow-wrap:anywhere; }
.maintenance-detail-main-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.maintenance-detail-card { padding:14px; min-width:0; }
.maintenance-detail-card-heading { padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--border); }
.maintenance-detail-card-heading h2 { margin:0; color:var(--text); font-size:13px; }
.maintenance-detail-list { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin:0; }
.maintenance-detail-list > div { min-width:0; padding-bottom:8px; border-bottom:1px solid color-mix(in srgb,var(--border) 62%,transparent); }
.maintenance-detail-list > div.wide { grid-column:1 / -1; }
.maintenance-detail-list dt { color:var(--muted); font-size:12px; }
.maintenance-detail-list dd { margin:4px 0 0; color:var(--text); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.maintenance-related-links { display:flex; gap:14px; margin-top:12px; }
.maintenance-related-links a { color:var(--accent); font-size:12px; text-decoration:none; }
.maintenance-related-links a:hover { text-decoration:underline; }
.maintenance-long-copy span, .maintenance-close-grid span { color:var(--muted); font-size:12px; }
.maintenance-long-copy p, .maintenance-close-grid p { margin:6px 0 0; color:var(--text-soft); font-size:12px; line-height:1.6; white-space:pre-wrap; }
.maintenance-close-card { margin-bottom:14px; }
.maintenance-close-grid { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:20px; }
.maintenance-close-grid strong { display:block; margin-top:7px; color:var(--text); font-size:17px; }
.maintenance-complete-money { display:grid; grid-template-columns:1fr 120px; gap:10px; margin-top:12px; }

@media (max-width:1200px) {
    .maintenance-detail-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
    .maintenance-detail-hero { align-items:flex-start; flex-direction:column; }
    .maintenance-detail-actions { justify-content:flex-start; }
    .maintenance-detail-main-grid { grid-template-columns:1fr; }
}
@media (max-width:650px) {
    .maintenance-detail-summary-grid { grid-template-columns:1fr 1fr; }
    .maintenance-detail-list, .maintenance-close-grid, .maintenance-complete-money { grid-template-columns:1fr; }
    .maintenance-detail-actions { width:100%; }
    .maintenance-detail-actions .secondary-button, .maintenance-detail-actions .primary-button, .maintenance-detail-actions .danger-button { width:100%; }
}

/* ========================================================================
   Phase 8.1 · Monitor de agentes
   ======================================================================== */
.agents-heading { align-items:flex-end; }
.agents-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.agents-heading-actions .secondary-button,
.agents-heading-actions .primary-button { min-height:38px; }
.agents-heading-actions button:disabled { opacity:.56; cursor:not-allowed; box-shadow:none; }

.agent-metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.agent-metric-grid .metric-card { min-width:0; }

.agent-filterbar { display:grid; grid-template-columns:minmax(125px,.72fr) minmax(125px,.72fr) minmax(140px,.8fr) minmax(145px,.82fr) minmax(130px,.72fr) minmax(260px,1.55fr) auto auto; gap:8px; align-items:end; margin-bottom:14px; padding:10px; border:1px solid var(--border); border-radius:9px; background:var(--panel); }
.agent-filterbar .filter-control { min-width:0; }
.agent-search { position:relative; display:block; min-width:0; }
.agent-search input { width:100%; min-height:38px; padding:0 38px 0 12px; border:1px solid var(--border); border-radius:7px; color:var(--text); background:var(--input-bg,var(--panel-2)); outline:none; font:inherit; }
.agent-search input:focus { border-color:color-mix(in srgb,var(--accent) 65%,var(--border)); box-shadow:0 0 0 3px var(--accent-soft); }
.agent-search svg { position:absolute; top:50%; right:12px; width:16px; transform:translateY(-50%); fill:none; stroke:var(--muted); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }

.agent-directory-panel { min-width:0; margin-bottom:14px; overflow:visible; }
.agent-directory-header { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border-bottom:1px solid var(--border); }
.agent-directory-header > div { display:flex; align-items:baseline; gap:9px; }
.agent-directory-header h2 { margin:0; font-size:14px; }
.agent-directory-header span { color:var(--muted); font-size:12px; }
.agent-table-wrap { width:100%; overflow-x:auto; }
.agent-table { width:100%; min-width:1320px; border-collapse:collapse; table-layout:auto; }
.agent-table th { padding:10px 9px; border-bottom:1px solid var(--border); color:var(--muted); text-align:left; font-size:12px; font-weight:500; white-space:nowrap; }
.agent-table td { padding:10px 9px; border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent); color:var(--text-soft); vertical-align:middle; font-size:12px; }
.agent-table tbody tr:last-child td { border-bottom:0; }
.agent-table tbody tr:hover { background:var(--panel-hover); }
.agent-row-revoked { opacity:.68; }

.agent-device-cell { display:flex; align-items:center; gap:9px; min-width:165px; }
.agent-device-icon { width:29px; height:29px; display:grid; place-items:center; flex:none; border-radius:7px; color:#4b96ff; background:rgba(55,140,255,.1); }
.agent-device-icon svg { width:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.agent-device-cell a { text-decoration:none; }
.agent-device-cell strong { display:block; color:var(--text); font-size:12px; }
.agent-device-cell a:hover strong { color:var(--accent); }
.agent-device-cell span, .agent-device-cell small { display:block; margin-top:2px; color:var(--muted); font-size:12px; white-space:nowrap; }

.agent-person-cell strong, .agent-user-cell strong { display:block; color:var(--text); font-size:12px; font-weight:600; }
.agent-person-cell a { text-decoration:none; }
.agent-person-cell a:hover strong { color:var(--accent); }
.agent-person-cell span, .agent-user-cell span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.agent-version-pill { display:inline-flex; align-items:center; min-height:21px; padding:0 7px; border:1px solid var(--border); border-radius:6px; color:var(--text-soft); background:var(--panel-2); font-size:12px; white-space:nowrap; }
.agent-status-line { display:inline-flex; align-items:center; gap:6px; }
.agent-status-line > i { width:7px; height:7px; flex:none; border-radius:50%; background:#7c8999; }
.agent-status-line.online > i { background:#23c96a; }
.agent-status-line.delayed > i { background:#f3a61c; }
.agent-status-line.offline > i, .agent-status-line.error > i { background:#ff535b; }
.agent-status-line.outdated > i { background:#8d62e9; }
.agent-status-line.revoked > i { background:#7c8999; }
.agent-status-line.pending > i { background:#378cff; }
.agent-revoked-note { display:block; margin-top:4px; color:#ff5961; font-size:12px; }
.agent-queue { display:inline-flex; align-items:center; padding:4px 7px; border-radius:6px; color:#368cff; background:rgba(55,140,255,.08); font-size:12px; white-space:nowrap; }
.agent-error-cell { max-width:225px; }
.agent-error-cell strong { display:block; color:#ff5b62; font-size:12px; }
.agent-error-cell span { display:block; margin-top:2px; color:var(--muted); font-size:12px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-no-error { color:var(--muted); font-size:12px; }
.agent-empty { min-height:110px; display:grid; place-items:center; align-content:center; gap:5px; text-align:center; }
.agent-empty strong { color:var(--text); font-size:12.5px; }
.agent-empty span { color:var(--muted); font-size:12px; }

.agent-bottom-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr) 285px; gap:14px; align-items:start; }
.agent-insights-panel { min-height:245px; padding:14px; }
.agent-insights-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.agent-insights-heading h2 { margin:0; color:var(--text); font-size:13px; }
.agent-insights-heading span { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.agent-insights-heading a { color:var(--accent); font-size:12px; text-decoration:none; }
.agent-version-bars { display:grid; gap:12px; padding-top:14px; }
.agent-version-bar > div { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:5px; }
.agent-version-bar strong { color:var(--text-soft); font-size:12px; }
.agent-version-bar span { color:var(--muted); font-size:12px; }
.agent-version-bar > i { display:block; height:7px; overflow:hidden; border-radius:999px; background:var(--panel-2); }
.agent-version-bar > i > b { display:block; height:100%; border-radius:inherit; background:#378cff; }
.agent-issue-item { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:9px; padding:11px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 68%,transparent); }
.agent-issue-item:last-child { border-bottom:0; }
.agent-issue-dot { width:7px; height:7px; border-radius:50%; background:#ff535b; }
.agent-issue-item strong { display:block; color:var(--text); font-size:12px; }
.agent-issue-item span { display:block; max-width:360px; margin-top:2px; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-issue-item time { color:var(--muted); font-size:12px; white-space:nowrap; }
.agent-side-empty { min-height:115px; display:grid; place-items:center; color:var(--muted); text-align:center; font-size:12px; }
.agent-bottom-stack { display:grid; gap:12px; }
.agent-note-panel { padding:14px; border-style:dashed; }
.agent-note-panel strong { display:block; color:var(--text); font-size:12.5px; }
.agent-note-panel p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.agent-next-phase { border-color:color-mix(in srgb,var(--accent) 30%,var(--border)); }

@media (max-width:1380px) {
    .agent-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .agent-filterbar { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .agent-search { grid-column:span 2; }
    .agent-bottom-grid { grid-template-columns:1fr 1fr; }
    .agent-bottom-stack { grid-column:1 / -1; grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
    .agents-heading { align-items:flex-start; flex-direction:column; }
    .agents-heading-actions { justify-content:flex-start; }
    .agent-filterbar { grid-template-columns:1fr 1fr; }
    .agent-search { grid-column:1 / -1; }
    .agent-bottom-grid { grid-template-columns:1fr; }
    .agent-bottom-stack { grid-column:auto; grid-template-columns:1fr; }
}
@media (max-width:600px) {
    .agent-metric-grid, .agent-filterbar { grid-template-columns:1fr; }
    .agent-search { grid-column:auto; }
    .agents-heading-actions { width:100%; flex-direction:column; align-items:stretch; }
    .agents-heading-actions .secondary-button, .agents-heading-actions .primary-button { width:100%; }
}

/* ========================================================================
   Phase 8.2 · Agent detail, diagnostics, heartbeats, pairing and versions
   ======================================================================== */
.agent-breadcrumb { display:flex; align-items:center; gap:7px; margin:2px 0 12px; color:var(--muted); font-size:12px; }
.agent-breadcrumb a { color:var(--accent); text-decoration:none; }
.agent-detail-hero { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:17px; margin-bottom:12px; }
.agent-detail-identity { display:flex; align-items:center; gap:14px; min-width:0; }
.agent-detail-icon { width:48px; height:48px; display:grid; place-items:center; flex:none; border-radius:12px; color:#378cff; background:rgba(55,140,255,.10); }
.agent-detail-icon svg { width:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.agent-detail-title-line { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.agent-detail-title-line h1 { margin:0; color:var(--text); font-size:21px; }
.agent-detail-identity p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.agent-detail-context { display:flex; flex-wrap:wrap; gap:15px; margin-top:9px; color:var(--muted); font-size:12px; }
.agent-detail-context strong { color:var(--text-soft); }
.agent-detail-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.agent-detail-actions form { margin:0; }
.agent-detail-stat-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.agent-detail-stat { padding:13px; min-height:73px; }
.agent-detail-stat span { display:block; color:var(--muted); font-size:12px; }
.agent-detail-stat strong { display:block; margin-top:9px; color:var(--text); font-size:12.5px; line-height:1.35; }
.agent-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.agent-detail-card { padding:14px; }
.agent-detail-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:10px; margin-bottom:11px; border-bottom:1px solid var(--border); }
.agent-detail-card-heading h2 { margin:0; color:var(--text); font-size:13px; }
.agent-detail-card-heading p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.agent-detail-list { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin:0; }
.agent-detail-list > div { min-width:0; padding:9px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); }
.agent-detail-list > div.wide { grid-column:1 / -1; }
.agent-detail-list dt { color:var(--muted); font-size:12px; }
.agent-detail-list dd { margin:4px 0 0; color:var(--text); font-size:12px; overflow-wrap:anywhere; }
.agent-related-links { display:flex; gap:14px; margin-top:12px; }
.agent-related-links a { color:var(--accent); font-size:12px; text-decoration:none; }
.agent-diagnostics-panel, .agent-heartbeat-panel, .agent-token-history-panel, .agent-version-catalog-panel { padding:14px; margin-bottom:12px; }
.agent-permission-note { color:var(--muted); font-size:12px; }
.agent-diagnostics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.agent-diagnostics-grid > div { padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); }
.agent-diagnostics-grid span { display:block; color:var(--muted); font-size:12px; }
.agent-diagnostics-grid strong { display:block; margin-top:6px; color:var(--text); font-size:12px; }
.agent-diagnostics-footnote { margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.agent-heartbeat-table, .agent-token-table, .agent-version-table { width:100%; border-collapse:collapse; }
.agent-heartbeat-table th, .agent-token-table th, .agent-version-table th { padding:9px 10px; color:var(--muted); font-size:12px; font-weight:600; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.agent-heartbeat-table td, .agent-token-table td, .agent-version-table td { padding:10px; color:var(--text-soft); font-size:12px; border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); vertical-align:middle; }
.agent-heartbeat-table tbody tr:last-child td, .agent-token-table tbody tr:last-child td, .agent-version-table tbody tr:last-child td { border-bottom:0; }
.agent-heartbeat-pagination { display:flex; align-items:center; justify-content:center; gap:14px; padding-top:12px; color:var(--muted); font-size:12px; }
.agent-heartbeat-pagination a { color:var(--accent); text-decoration:none; }
.text-danger-button { border:0; padding:0; color:#ff5961; background:transparent; cursor:pointer; font:inherit; font-size:12px; }
.agent-pairing-form-panel { max-width:800px; padding:18px; }
.agent-pairing-form { display:grid; gap:16px; }
.agent-pairing-callout { padding:13px; border:1px solid color-mix(in srgb,#f3a61c 35%,var(--border)); border-radius:8px; background:color-mix(in srgb,#f3a61c 7%,var(--panel)); }
.agent-pairing-callout strong { color:var(--text); font-size:12px; }
.agent-pairing-callout p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.agent-pairing-form-actions { display:flex; justify-content:flex-end; gap:8px; }
.agent-pairing-created-panel { max-width:900px; margin:20px auto; padding:28px; text-align:center; }
.agent-pairing-created-icon { width:54px; height:54px; display:grid; place-items:center; margin:0 auto 12px; border-radius:50%; color:#fff; background:#23c96a; font-size:22px; font-weight:700; }
.agent-pairing-created-panel h1 { margin:0; color:var(--text); font-size:22px; }
.agent-pairing-created-panel > p { margin:7px auto 18px; max-width:620px; color:var(--muted); font-size:12px; line-height:1.5; }
.agent-token-warning { display:grid; gap:4px; margin:0 0 16px; padding:12px; border:1px solid color-mix(in srgb,#ff535b 35%,var(--border)); border-radius:8px; color:#ff5961; background:color-mix(in srgb,#ff535b 7%,var(--panel)); text-align:left; }
.agent-token-warning strong { font-size:12px; }
.agent-token-warning span { font-size:12px; line-height:1.5; }
.agent-token-field { display:block; text-align:left; }
.agent-token-field > span { display:block; margin-bottom:6px; color:var(--muted); font-size:12px; }
.agent-token-field > div { display:flex; gap:8px; }
.agent-token-field input { min-width:0; flex:1; padding:11px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--panel-2); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; }
.agent-pairing-created-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }
.agent-pairing-created-meta > div { padding:11px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); text-align:left; }
.agent-pairing-created-meta span { display:block; color:var(--muted); font-size:12px; }
.agent-pairing-created-meta strong { display:block; margin-top:5px; color:var(--text); font-size:12px; overflow-wrap:anywhere; }
.agent-pairing-created-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.agent-checksum { display:block; max-width:330px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-soft); font-size:12px; }
.agent-download-link { color:var(--accent); text-decoration:none; white-space:nowrap; }

@media (max-width:1100px) {
    .agent-detail-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .agent-diagnostics-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:800px) {
    .agent-detail-hero { align-items:flex-start; flex-direction:column; }
    .agent-detail-actions { width:100%; justify-content:flex-start; }
    .agent-detail-grid { grid-template-columns:1fr; }
    .agent-detail-stat-grid { grid-template-columns:1fr 1fr; }
    .agent-pairing-created-meta { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .agent-detail-stat-grid, .agent-diagnostics-grid { grid-template-columns:1fr; }
    .agent-detail-list { grid-template-columns:1fr; }
    .agent-detail-list > div.wide { grid-column:auto; }
    .agent-token-field > div, .agent-pairing-form-actions, .agent-pairing-created-actions { flex-direction:column; }
}

/* ========================================================================== */
/* Phase 9.1 - Activity monitor                                               */
/* ========================================================================== */
.activity-heading { align-items:flex-end; }
.activity-metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.activity-metric-grid .metric-card { min-width:0; }
.activity-duration-value { font-size:22px; line-height:1.15; }

.activity-filterbar { display:grid; grid-template-columns:minmax(145px,.9fr) minmax(190px,1.2fr) minmax(135px,.72fr) minmax(135px,.72fr) auto auto; gap:8px; align-items:end; margin-bottom:12px; padding:10px; border:1px solid var(--border); border-radius:9px; background:var(--panel); }
.activity-filterbar .filter-control input[type="date"] { width:100%; min-height:39px; padding:0 10px; border:1px solid var(--border); border-radius:7px; background:var(--input-bg,var(--panel-2)); color:var(--text); color-scheme:inherit; font:inherit; outline:none; }
.activity-filterbar .filter-control input[type="date"]:focus { border-color:color-mix(in srgb,var(--accent) 65%,var(--border)); box-shadow:0 0 0 3px var(--accent-soft); }

.activity-disclaimer { display:flex; align-items:flex-start; gap:9px; margin:0 0 12px; padding:9px 11px; border:1px solid color-mix(in srgb,#3f8cff 35%,var(--border)); border-radius:8px; background:color-mix(in srgb,#3f8cff 5%,var(--panel)); }
.activity-disclaimer > span { width:17px; height:17px; display:grid; place-items:center; flex:none; border:1px solid #3f8cff; border-radius:50%; color:#3f8cff; font-size:12.5px; font-weight:700; }
.activity-disclaimer p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }

.activity-layout { display:grid; grid-template-columns:minmax(0,1fr) 305px; gap:14px; align-items:start; }
.activity-directory-panel { min-width:0; overflow:visible; }
.activity-directory-header { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border-bottom:1px solid var(--border); }
.activity-directory-header > div { display:flex; align-items:baseline; gap:9px; }
.activity-directory-header h2 { margin:0; font-size:14px; }
.activity-directory-header > div > span { color:var(--muted); font-size:12px; }
.activity-phase-note { max-width:360px; color:var(--muted); font-size:12px; line-height:1.35; text-align:right; }

.activity-table-wrap { width:100%; overflow-x:auto; }
.activity-table { width:100%; min-width:1240px; border-collapse:collapse; table-layout:auto; }
.activity-table th { padding:10px 9px; border-bottom:1px solid var(--border); color:var(--muted); text-align:left; font-size:12px; font-weight:500; white-space:nowrap; }
.activity-table td { padding:10px 9px; border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent); color:var(--text-soft); vertical-align:middle; font-size:12px; white-space:nowrap; }
.activity-table tbody tr:last-child td { border-bottom:0; }
.activity-table tbody tr:hover { background:var(--panel-hover); }
.activity-employee-cell { display:flex; align-items:center; gap:9px; min-width:170px; }
.activity-avatar { width:29px; height:29px; display:grid; place-items:center; flex:none; border-radius:50%; color:#fff; background:linear-gradient(135deg,#2457b8,#6548bf); font-size:12px; font-weight:700; }
.activity-employee-cell strong { display:block; color:var(--text); font-size:12px; }
.activity-employee-cell span:not(.activity-avatar) { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.activity-duration { font-weight:650; }
.activity-duration.active { color:#28cb69; }
.activity-duration.idle { color:#f1aa25; }
.activity-duration.locked { color:#ff5a61; }
.activity-duration.unknown { color:#9b74ef; }
.activity-coverage-cell { min-width:90px; }
.activity-coverage-cell strong { display:block; margin-bottom:5px; color:var(--text); font-size:12px; }
.activity-coverage-cell > span { width:78px; height:4px; display:block; overflow:hidden; border-radius:999px; background:var(--border); }
.activity-coverage-cell > span > i { height:100%; display:block; border-radius:inherit; background:#29c96a; }
.activity-row-link { color:var(--accent); font-size:12px; font-weight:650; text-decoration:none; white-space:nowrap; }
.activity-row-link:hover { text-decoration:underline; }
.activity-empty { min-height:190px; display:grid; place-items:center; align-content:center; gap:6px; padding:24px; text-align:center; color:var(--muted); }
.activity-empty strong { color:var(--text); font-size:13px; }
.activity-empty span { max-width:460px; font-size:12px; line-height:1.5; }

.activity-pagination { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 14px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
.activity-pagination-controls { display:flex; align-items:center; gap:5px; }
.activity-page-size-form label { display:flex; align-items:center; gap:7px; margin-right:6px; }
.activity-page-size-form select { height:32px; padding:0 28px 0 9px; border:1px solid var(--border); border-radius:7px; background:var(--input-bg,var(--panel-2)); color:var(--text); font:inherit; }

.activity-side-column { display:grid; gap:12px; min-width:0; }
.activity-side-panel { padding:13px; }
.activity-side-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.activity-side-heading h2 { margin:0; color:var(--text); font-size:12.5px; }
.activity-side-heading span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.activity-side-empty { min-height:82px; display:grid; place-items:center; color:var(--muted); text-align:center; font-size:12px; line-height:1.45; }

.activity-state-distribution { display:grid; grid-template-columns:112px minmax(0,1fr); gap:12px; align-items:center; padding-top:13px; }
.activity-state-donut { --active:0%; --idle:0%; --locked:0%; --unknown:0%; width:112px; aspect-ratio:1; position:relative; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#27ca69 0 var(--active), #f0a91f var(--active) calc(var(--active) + var(--idle)), #ff555d calc(var(--active) + var(--idle)) calc(var(--active) + var(--idle) + var(--locked)), #9a75ec calc(var(--active) + var(--idle) + var(--locked)) 100%); }
.activity-state-donut::after { content:""; position:absolute; inset:16px; border-radius:50%; background:var(--panel); }
.activity-state-donut > div { position:relative; z-index:1; max-width:80px; text-align:center; }
.activity-state-donut strong { display:block; color:var(--text); font-size:13px; line-height:1.1; }
.activity-state-donut span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.activity-state-legend { display:grid; gap:7px; }
.activity-state-legend > div { display:grid; grid-template-columns:7px minmax(0,1fr) auto; gap:6px; align-items:center; }
.activity-state-legend i { width:6px; height:6px; border-radius:50%; }
.activity-state-legend span, .activity-state-legend strong { font-size:12px; }
.activity-state-legend span { color:var(--text-soft); }
.activity-state-legend strong { color:var(--text); }
.activity-state-legend .active i { background:#27ca69; }
.activity-state-legend .idle i { background:#f0a91f; }
.activity-state-legend .locked i { background:#ff555d; }
.activity-state-legend .unknown i { background:#9a75ec; }

.activity-app-item { display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 68%,transparent); }
.activity-app-item:last-child { border-bottom:0; }
.activity-app-rank { width:20px; height:20px; display:grid; place-items:center; border-radius:6px; background:color-mix(in srgb,#3d8dff 11%,var(--panel-2)); color:#4c95ff; font-size:12px; font-weight:700; }
.activity-app-main { min-width:0; }
.activity-app-main strong { display:block; overflow:hidden; color:var(--text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.activity-app-main span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.activity-app-duration { text-align:right; }
.activity-app-duration strong { display:block; color:var(--text); font-size:12px; }
.activity-app-duration span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }

.activity-classification-list { display:grid; padding-top:8px; }
.activity-classification-row { display:grid; grid-template-columns:7px minmax(0,1fr) auto 40px; align-items:center; gap:7px; padding:7px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 62%,transparent); }
.activity-classification-row:last-child { border-bottom:0; }
.activity-classification-row i { width:6px; height:6px; border-radius:50%; background:#7c8999; }
.activity-classification-row span, .activity-classification-row strong, .activity-classification-row b { font-size:12px; }
.activity-classification-row span { color:var(--text-soft); }
.activity-classification-row strong { color:var(--text); font-weight:600; }
.activity-classification-row b { color:var(--muted); font-weight:500; text-align:right; }
.activity-classification-row.green i { background:#27ca69; }
.activity-classification-row.amber i { background:#f0a91f; }
.activity-classification-row.red i { background:#ff555d; }
.activity-classification-row.purple i { background:#9a75ec; }
.activity-classification-row.gray i { background:#7c8999; }

.activity-period-panel dl { display:grid; margin:0; padding-top:6px; }
.activity-period-panel dl > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 62%,transparent); }
.activity-period-panel dl > div:last-child { border-bottom:0; }
.activity-period-panel dt { color:var(--muted); font-size:12px; }
.activity-period-panel dd { margin:0; color:var(--text); font-size:12px; font-weight:600; text-align:right; overflow-wrap:anywhere; }

@media (max-width: 1320px) {
    .activity-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .activity-filterbar { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .activity-filterbar .filter-submit, .activity-filterbar .filter-clear { grid-row:2; }
}

@media (max-width: 1050px) {
    .activity-layout { grid-template-columns:1fr; }
    .activity-side-column { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
    .activity-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .activity-filterbar { grid-template-columns:1fr 1fr; }
    .activity-filterbar .filter-submit, .activity-filterbar .filter-clear { grid-row:auto; }
    .activity-side-column { grid-template-columns:1fr; }
    .activity-directory-header { align-items:flex-start; flex-direction:column; padding:12px 14px; }
    .activity-phase-note { max-width:none; text-align:left; }
    .activity-pagination { align-items:flex-start; flex-direction:column; }
    .activity-pagination-controls { width:100%; flex-wrap:wrap; }
}

@media (max-width: 520px) {
    .activity-metric-grid, .activity-filterbar { grid-template-columns:1fr; }
    .activity-state-distribution { grid-template-columns:1fr; justify-items:center; }
    .activity-state-legend { width:100%; }
}

/* ========================================================================== 
   Fase 9.2 — Actividad detallada por empleado
   ========================================================================== */
.activity-detail-breadcrumb { display:flex; align-items:center; gap:7px; margin:0 0 10px; color:var(--muted); font-size:12px; }
.activity-detail-breadcrumb a { color:var(--accent); text-decoration:none; }
.activity-detail-breadcrumb a:hover { text-decoration:underline; }
.activity-detail-filter-panel { margin-bottom:10px; padding:10px 12px; }
.activity-detail-filterbar { display:flex; justify-content:flex-end; align-items:end; gap:8px; }
.activity-detail-filterbar .filter-control { width:160px; }
.activity-detail-filterbar input[type="date"] { width:100%; min-height:36px; padding:0 9px; border:1px solid var(--border); border-radius:7px; background:var(--input-bg,var(--panel-2)); color:var(--text); color-scheme:inherit; font:inherit; }

.activity-detail-hero { min-height:104px; display:grid; grid-template-columns:minmax(280px,1.2fr) minmax(340px,1fr) auto; align-items:center; gap:20px; margin-bottom:12px; padding:16px 18px; }
.activity-detail-person { display:flex; align-items:center; gap:14px; min-width:0; }
.activity-detail-avatar { width:58px; height:58px; display:grid; place-items:center; flex:none; border-radius:50%; background:linear-gradient(135deg,#2457b8,#6548bf); color:#fff; font-size:18px; font-weight:750; }
.activity-detail-person h1 { margin:0; color:var(--text); font-size:22px; line-height:1.1; }
.activity-detail-person p { margin:7px 0 0; color:var(--muted); font-size:12.5px; }
.activity-detail-context { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.activity-detail-context > div { min-width:0; }
.activity-detail-context span { display:block; margin-bottom:6px; color:var(--muted); font-size:12px; }
.activity-detail-context strong, .activity-detail-context a { display:block; overflow:hidden; color:var(--text); font-size:12.5px; font-weight:650; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.activity-detail-context a:hover { color:var(--accent); }
.activity-detail-status { display:flex; align-items:center; gap:14px; justify-self:end; }
.activity-detail-status .badge { white-space:nowrap; }
.activity-coverage-ring { --coverage:0%; width:72px; aspect-ratio:1; position:relative; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#29ca69 0 var(--coverage), var(--border) var(--coverage) 100%); }
.activity-coverage-ring::after { content:""; position:absolute; inset:6px; border-radius:50%; background:var(--panel); }
.activity-coverage-ring span { position:relative; z-index:1; text-align:center; }
.activity-coverage-ring strong { display:block; color:var(--text); font-size:13px; }
.activity-coverage-ring small { display:block; margin-top:2px; color:var(--muted); font-size:12px; }

.activity-detail-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.activity-detail-metrics article { position:relative; min-height:90px; padding:15px 14px; overflow:hidden; }
.activity-detail-metrics article::before { content:""; width:7px; height:7px; position:absolute; top:17px; left:14px; border-radius:50%; background:#3f8cff; }
.activity-detail-metrics article > span { display:block; padding-left:14px; color:var(--muted); font-size:12px; }
.activity-detail-metrics article strong { display:block; margin-top:12px; color:var(--text); font-size:18px; line-height:1.05; }
.activity-detail-metrics article small { display:block; margin-top:7px; color:var(--muted); font-size:12px; }
.activity-detail-metrics article.active::before { background:#27ca69; }
.activity-detail-metrics article.idle::before { background:#f0a91f; }
.activity-detail-metrics article.locked::before { background:#ff555d; }
.activity-detail-metrics article.unknown::before { background:#9a75ec; }
.activity-detail-metrics article.first::before, .activity-detail-metrics article.last::before { background:#3f8cff; }
.activity-detail-metrics article.first strong, .activity-detail-metrics article.last strong { font-size:13px; line-height:1.25; }

.activity-detail-main-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(360px,.95fr); gap:12px; align-items:start; margin-bottom:12px; }
.activity-timeline-panel, .activity-detail-apps-panel { min-width:0; }
.activity-detail-panel-heading { min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border-bottom:1px solid var(--border); }
.activity-detail-panel-heading h2 { margin:0; color:var(--text); font-size:14px; }
.activity-detail-panel-heading span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.activity-timeline-legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.activity-timeline-legend span { display:flex; align-items:center; gap:4px; margin:0; color:var(--text-soft); font-size:12px; }
.activity-timeline-legend i { width:7px; height:7px; border-radius:50%; }
.activity-timeline-legend .active i { background:#27ca69; }
.activity-timeline-legend .idle i { background:#f0a91f; }
.activity-timeline-legend .locked i { background:#ff555d; }
.activity-timeline-legend .unknown i { background:#9a75ec; }

.activity-timeline-axis { display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; padding:13px 14px 4px; }
.activity-timeline-axis > div { height:18px; position:relative; border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent); }
.activity-timeline-axis > div span { position:absolute; bottom:3px; transform:translateX(-50%); color:var(--muted); font-size:12px; white-space:nowrap; }
.activity-timeline-axis > div span:first-child { transform:none; }
.activity-timeline-axis > div span:last-child { transform:translateX(-100%); }
.activity-timeline-days { display:grid; gap:8px; padding:7px 14px 12px; }
.activity-timeline-day { display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; align-items:center; }
.activity-timeline-day > strong { color:var(--text-soft); font-size:12px; font-weight:600; text-transform:capitalize; }
.activity-timeline-track { height:17px; position:relative; overflow:hidden; border:1px solid color-mix(in srgb,var(--border) 72%,transparent); border-radius:5px; background:var(--panel-hover); }
.activity-timeline-track > i { height:100%; min-width:2px; position:absolute; top:0; border-radius:3px; cursor:help; }
.activity-timeline-track > i:hover { z-index:2; outline:2px solid color-mix(in srgb,var(--text) 48%,transparent); outline-offset:1px; }
.activity-timeline-track > i.active { background:#27ca69; }
.activity-timeline-track > i.idle { background:#f0a91f; }
.activity-timeline-track > i.locked { background:#ff555d; }
.activity-timeline-track > i.unknown { background:#9a75ec; }
.activity-timeline-track > i.logged-out { background:#7b8795; }

.activity-event-table-wrap { max-height:325px; overflow:auto; border-top:1px solid var(--border); }
.activity-event-table { width:100%; border-collapse:collapse; }
.activity-event-table th { position:sticky; top:0; z-index:1; padding:9px 13px; background:var(--panel); border-bottom:1px solid var(--border); color:var(--muted); text-align:left; font-size:12px; font-weight:500; }
.activity-event-table td { padding:9px 13px; border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent); color:var(--text-soft); font-size:12px; vertical-align:middle; }
.activity-event-table td:nth-child(1) { width:185px; white-space:nowrap; }
.activity-event-table td:nth-child(3) { width:80px; text-align:right; white-space:nowrap; }
.activity-event-table td strong { color:var(--text); font-weight:600; }
.activity-event-table td span:not(.activity-event-dot) { color:var(--muted); }
.activity-event-dot { width:7px; height:7px; display:inline-block; margin-right:7px; border-radius:50%; vertical-align:middle; background:#9a75ec; }
.activity-event-dot.active { background:#27ca69; }
.activity-event-dot.idle { background:#f0a91f; }
.activity-event-dot.locked { background:#ff555d; }
.activity-event-dot.logged-out { background:#7b8795; }

.activity-detail-apps-panel { padding-bottom:8px; }
.activity-detail-app-row { display:grid; grid-template-columns:24px minmax(0,1fr) 86px 96px; gap:8px; align-items:center; padding:11px 13px; border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); }
.activity-detail-app-row:last-of-type { border-bottom:0; }
.activity-detail-app-name { min-width:0; }
.activity-detail-app-name strong { display:block; overflow:hidden; color:var(--text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.activity-detail-app-name span { display:block; overflow:hidden; margin-top:3px; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.activity-detail-app-time { text-align:right; }
.activity-detail-app-time strong { display:block; color:var(--text); font-size:12px; }
.activity-detail-app-time span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.activity-detail-app-row .badge { justify-self:end; font-size:12px; }
.badge-purple { border-color:color-mix(in srgb,#9a75ec 48%,var(--border)); background:color-mix(in srgb,#9a75ec 10%,var(--panel)); color:#9a75ec; }
.activity-raw-note { margin:8px 12px 4px; padding:8px 9px; border:1px solid var(--border); border-radius:7px; background:var(--panel-hover); color:var(--muted); font-size:12px; line-height:1.45; }
.activity-detail-empty { min-height:180px; display:grid; place-items:center; padding:20px; color:var(--muted); font-size:12px; text-align:center; }
.activity-detail-empty.compact { min-height:95px; }

.activity-detail-bottom-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.activity-detail-summary-panel { min-height:190px; }
.activity-detail-summary-body { display:grid; grid-template-columns:145px minmax(0,1fr); gap:18px; align-items:center; padding:18px; }
.activity-detail-summary-body .activity-state-donut { width:125px; }
.activity-detail-summary-body .activity-state-legend { gap:11px; }
.activity-detail-summary-body .activity-state-legend strong { font-size:12px; }
.activity-detail-info-panel { display:grid; grid-template-columns:36px minmax(0,1fr); align-content:center; gap:12px; padding:22px; }
.activity-detail-info-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb,#3f8cff 12%,var(--panel)); color:#3f8cff; font-weight:700; }
.activity-detail-info-panel p { margin:0; align-self:center; color:var(--text-soft); font-size:12px; line-height:1.55; }
.activity-detail-info-panel a { grid-column:2; width:max-content; color:var(--accent); font-size:12px; font-weight:650; text-decoration:none; }

@media (max-width:1350px) {
    .activity-detail-hero { grid-template-columns:1fr 1fr; }
    .activity-detail-status { grid-column:1 / -1; justify-self:start; }
    .activity-detail-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .activity-detail-main-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) {
    .activity-detail-filterbar { flex-wrap:wrap; justify-content:flex-start; }
    .activity-detail-hero { grid-template-columns:1fr; }
    .activity-detail-context { grid-template-columns:1fr 1fr; }
    .activity-detail-status { grid-column:auto; }
    .activity-detail-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .activity-detail-bottom-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
    .activity-detail-filterbar .filter-control { width:100%; }
    .activity-detail-filterbar .filter-submit, .activity-detail-filterbar .filter-clear { flex:1; text-align:center; }
    .activity-detail-context, .activity-detail-metrics { grid-template-columns:1fr; }
    .activity-timeline-axis, .activity-timeline-day { grid-template-columns:52px minmax(0,1fr); gap:6px; }
    .activity-timeline-legend { justify-content:flex-start; }
    .activity-detail-app-row { grid-template-columns:22px minmax(0,1fr) auto; }
    .activity-detail-app-row .badge { grid-column:2 / -1; justify-self:start; }
    .activity-detail-summary-body { grid-template-columns:1fr; justify-items:center; }
}

/* ========================================================================== */
/* Phase 10.1 - Alerts monitor                                                */
/* ========================================================================== */
.alerts-page { min-width:0; }
.alerts-heading { margin-bottom:14px; }
.alerts-heading .module-heading-actions { display:flex; gap:8px; }
.alerts-heading .btn-secondary[disabled] { cursor:not-allowed; opacity:.62; }
.page-warning { margin:0 0 10px; padding:9px 12px; border:1px solid color-mix(in srgb,#f0a91f 45%,var(--border)); border-radius:8px; background:color-mix(in srgb,#f0a91f 8%,var(--panel)); color:var(--text-soft); font-size:12px; }

.alert-metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.alert-metric-card { min-height:103px; display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; align-items:start; padding:16px 14px; }
.alert-metric-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; font-size:16px; font-weight:800; background:color-mix(in srgb,#ff555d 12%,var(--panel)); color:#ff555d; }
.alert-metric-card > div { min-width:0; }
.alert-metric-card small { display:block; overflow:hidden; color:var(--text-soft); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.alert-metric-card strong { display:block; margin-top:9px; color:var(--text); font-size:22px; line-height:1; }
.alert-metric-card span:not(.alert-metric-icon) { display:block; margin-top:8px; color:var(--muted); font-size:12px; }
.alert-metric-card.high .alert-metric-icon { background:color-mix(in srgb,#f28b22 12%,var(--panel)); color:#f28b22; }
.alert-metric-card.open .alert-metric-icon { background:color-mix(in srgb,#ff555d 12%,var(--panel)); color:#ff555d; }
.alert-metric-card.acknowledged .alert-metric-icon { background:color-mix(in srgb,#8b72ed 12%,var(--panel)); color:#8b72ed; }
.alert-metric-card.progress .alert-metric-icon { background:color-mix(in srgb,#3f8cff 12%,var(--panel)); color:#3f8cff; }
.alert-metric-card.resolved .alert-metric-icon { background:color-mix(in srgb,#27ca69 12%,var(--panel)); color:#27ca69; }

.alert-filterbar { display:grid; grid-template-columns:130px 145px minmax(170px,1.1fr) 150px 155px 150px minmax(230px,1.5fr) auto auto; gap:8px; align-items:end; padding:10px; margin-bottom:12px; }
.alert-filterbar .filter-control { min-width:0; }
.alert-filterbar .filter-control > span { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; font-weight:650; }
.alert-filterbar select, .alert-filterbar input { width:100%; height:34px; border:1px solid var(--border); border-radius:7px; outline:0; background:var(--panel); color:var(--text); padding:0 9px; font-size:12px; }
.alert-filterbar select:focus, .alert-filterbar input:focus { border-color:color-mix(in srgb,var(--accent) 65%,var(--border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }
.alert-filterbar select:disabled { opacity:.55; cursor:not-allowed; }
.alert-filterbar .filter-submit, .alert-filterbar .filter-clear { height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0 13px; border:1px solid var(--border); border-radius:7px; background:var(--panel); color:var(--text); font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; }
.alert-filterbar .filter-submit { cursor:pointer; }
.alert-filterbar .filter-submit:hover, .alert-filterbar .filter-clear:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); background:var(--panel-hover); }

.alerts-layout { display:grid; grid-template-columns:minmax(0,1fr) 285px; gap:12px; align-items:start; }
.alert-queue-panel { min-width:0; overflow:visible; }
.alert-panel-heading, .alert-side-heading { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border-bottom:1px solid var(--border); }
.alert-panel-heading h2, .alert-side-heading h2 { margin:0; color:var(--text); font-size:13px; }
.alert-panel-heading > div > span, .alert-side-heading > span { color:var(--muted); font-size:12px; }
.alert-readonly-note { padding:4px 7px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:var(--panel-hover); font-size:12px; }
.alert-table-wrap { overflow-x:auto; }
.alert-table { width:100%; border-collapse:collapse; min-width:1040px; }
.alert-table th { padding:10px 10px; border-bottom:1px solid var(--border); color:var(--muted); text-align:left; font-size:12px; font-weight:600; white-space:nowrap; }
.alert-table td { padding:10px 10px; border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); color:var(--text-soft); font-size:12px; vertical-align:middle; }
.alert-table tbody tr:hover { background:color-mix(in srgb,var(--panel-hover) 70%,transparent); }
.alert-title-cell { min-width:190px; }
.alert-title-cell strong, .alert-context-label { display:block; color:var(--text); font-size:12px; font-weight:650; }
.alert-title-cell span, .alert-context-description { display:block; max-width:260px; margin-top:3px; overflow:hidden; color:var(--muted); font-size:12px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.alert-severity { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.alert-severity i { width:7px; height:7px; border-radius:50%; background:#3f8cff; }
.alert-severity.critical i { background:#ff555d; }
.alert-severity.high i { background:#f28b22; }
.alert-severity.medium i { background:#f0b62a; }
.alert-severity.low i { background:#27ca69; }
.alert-severity.info i { background:#3f8cff; }
.alert-status { display:inline-flex; align-items:center; min-height:22px; padding:0 7px; border:1px solid var(--border); border-radius:5px; background:var(--panel-hover); color:var(--text-soft); font-size:12px; white-space:nowrap; }
.alert-status.open { border-color:color-mix(in srgb,#ff555d 52%,var(--border)); background:color-mix(in srgb,#ff555d 8%,var(--panel)); color:#ff555d; }
.alert-status.acknowledged { border-color:color-mix(in srgb,#8b72ed 52%,var(--border)); background:color-mix(in srgb,#8b72ed 8%,var(--panel)); color:#8b72ed; }
.alert-status.in-progress { border-color:color-mix(in srgb,#3f8cff 52%,var(--border)); background:color-mix(in srgb,#3f8cff 8%,var(--panel)); color:#3f8cff; }
.alert-status.resolved { border-color:color-mix(in srgb,#27ca69 52%,var(--border)); background:color-mix(in srgb,#27ca69 8%,var(--panel)); color:#27ca69; }
.alert-status.dismissed { color:var(--muted); }
.alert-table .nowrap { white-space:nowrap; }
.alert-empty { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--muted); text-align:center; }
.alert-empty strong { color:var(--text-soft); font-size:12px; }
.alert-empty span { font-size:12px; }
.alert-table-footer { min-height:49px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 13px; color:var(--muted); font-size:12px; }
.alert-pagination-controls { display:flex; align-items:center; gap:12px; }
.alert-pagination-controls .page-size-form label { display:flex; align-items:center; gap:6px; }
.alert-pagination-controls select { height:29px; border:1px solid var(--border); border-radius:6px; background:var(--panel); color:var(--text); font-size:12px; }

.alerts-side-column { display:grid; gap:12px; }
.alert-trend-panel, .alert-recent-panel, .alert-distribution-panel { min-width:0; overflow:hidden; }
.alert-trend-legend { display:flex; flex-wrap:wrap; gap:9px; padding:10px 13px 2px; }
.alert-trend-legend span { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:12px; }
.alert-trend-legend i { width:7px; height:7px; border-radius:2px; background:#3f8cff; }
.alert-trend-legend i.critical, .alert-trend-bar i.critical { background:#ff555d; }
.alert-trend-legend i.high, .alert-trend-bar i.high { background:#f28b22; }
.alert-trend-legend i.medium, .alert-trend-bar i.medium { background:#f0b62a; }
.alert-trend-legend i.info, .alert-trend-bar i.info { background:#3f8cff; }
.alert-trend-chart { height:165px; display:grid; grid-template-columns:repeat(7,1fr); gap:7px; align-items:end; padding:16px 12px 12px; background:linear-gradient(to top,transparent 24%,color-mix(in srgb,var(--border) 55%,transparent) 25%,transparent 26%,transparent 49%,color-mix(in srgb,var(--border) 55%,transparent) 50%,transparent 51%,transparent 74%,color-mix(in srgb,var(--border) 55%,transparent) 75%,transparent 76%); }
.alert-trend-day { height:100%; display:grid; grid-template-rows:minmax(0,1fr) 18px; gap:6px; align-items:end; }
.alert-trend-bar { width:100%; min-height:4px; align-self:end; display:flex; flex-direction:column-reverse; overflow:hidden; border-radius:3px 3px 0 0; background:color-mix(in srgb,var(--border) 50%,transparent); }
.alert-trend-bar i { display:block; width:100%; min-height:0; }
.alert-trend-day small { color:var(--muted); text-align:center; font-size:12px; white-space:nowrap; }

.alert-recent-list { display:grid; }
.alert-recent-list article { display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:7px; align-items:start; padding:10px 12px; border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); }
.alert-recent-list article:last-child { border-bottom:0; }
.alert-recent-list article > i { width:7px; height:7px; margin-top:3px; border-radius:50%; background:#ff555d; }
.alert-recent-list strong { display:block; color:var(--text); font-size:12px; line-height:1.3; }
.alert-recent-list span { display:block; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.3; }
.alert-recent-list time { color:var(--muted); font-size:12px; white-space:nowrap; }
.alert-side-empty { padding:26px 14px; color:var(--muted); font-size:12px; text-align:center; }

.alert-distribution-body { display:grid; grid-template-columns:112px minmax(0,1fr); gap:12px; align-items:center; padding:14px 12px 8px; }
.alert-status-donut { --open:0%; --ack:0%; --progress:0%; --resolved:0%; width:105px; aspect-ratio:1; position:relative; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#ff555d 0 var(--open), #8b72ed var(--open) calc(var(--open) + var(--ack)), #3f8cff calc(var(--open) + var(--ack)) calc(var(--open) + var(--ack) + var(--progress)), #27ca69 calc(var(--open) + var(--ack) + var(--progress)) calc(var(--open) + var(--ack) + var(--progress) + var(--resolved)), #7b8795 calc(var(--open) + var(--ack) + var(--progress) + var(--resolved)) 100%); }
.alert-status-donut::after { content:""; position:absolute; inset:14px; border-radius:50%; background:var(--panel); }
.alert-status-donut span { position:relative; z-index:1; text-align:center; }
.alert-status-donut strong { display:block; color:var(--text); font-size:18px; }
.alert-status-donut small { display:block; margin-top:2px; color:var(--muted); font-size:12px; }
.alert-status-legend { display:grid; gap:7px; }
.alert-status-legend > div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.alert-status-legend > div > span { display:flex; align-items:center; gap:5px; color:var(--text-soft); font-size:12px; }
.alert-status-legend i { width:7px; height:7px; border-radius:50%; background:#7b8795; }
.alert-status-legend i.open { background:#ff555d; }
.alert-status-legend i.acknowledged { background:#8b72ed; }
.alert-status-legend i.in-progress { background:#3f8cff; }
.alert-status-legend i.resolved { background:#27ca69; }
.alert-status-legend strong { color:var(--text); font-size:12px; }
.alert-distribution-footnote { margin:0; padding:0 12px 12px; color:var(--muted); font-size:12px; }

@media (max-width:1450px) {
    .alert-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .alert-filterbar { grid-template-columns:repeat(4,minmax(130px,1fr)); }
    .alert-search-control { grid-column:span 2; }
}
@media (max-width:1120px) {
    .alerts-layout { grid-template-columns:1fr; }
    .alerts-side-column { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .alert-recent-panel { min-height:100%; }
}
@media (max-width:820px) {
    .alerts-heading { align-items:flex-start; flex-direction:column; }
    .alert-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .alert-filterbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .alert-search-control { grid-column:1 / -1; }
    .alerts-side-column { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .alert-metric-grid, .alert-filterbar { grid-template-columns:1fr; }
    .alert-search-control { grid-column:auto; }
    .alert-table-footer { align-items:flex-start; flex-direction:column; padding:10px 12px; }
    .alert-pagination-controls { width:100%; justify-content:space-between; }
}

/* ================================================================
   Fase 10.2 · Detalle y gestión de Alertas
   ================================================================ */
.alert-detail-page { min-width:0; }
.alert-detail-breadcrumb { display:flex; align-items:center; gap:7px; margin:0 0 10px; color:var(--muted); font-size:12px; }
.alert-detail-breadcrumb a { color:var(--accent); text-decoration:none; }
.alert-detail-breadcrumb a:hover { text-decoration:underline; }
.alert-detail-hero { min-height:118px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px; margin-bottom:12px; }
.alert-detail-identity { display:flex; align-items:center; gap:14px; min-width:0; }
.alert-detail-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; font-size:23px; font-weight:800; background:color-mix(in srgb,#3f8cff 12%,var(--panel)); color:#3f8cff; flex:0 0 auto; }
.alert-detail-icon.critical { background:color-mix(in srgb,#ff555d 13%,var(--panel)); color:#ff555d; }
.alert-detail-icon.high { background:color-mix(in srgb,#f28b22 13%,var(--panel)); color:#f28b22; }
.alert-detail-icon.medium { background:color-mix(in srgb,#f0b62a 13%,var(--panel)); color:#f0b62a; }
.alert-detail-icon.low { background:color-mix(in srgb,#27ca69 13%,var(--panel)); color:#27ca69; }
.alert-detail-title-line { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.alert-detail-title-line h1 { margin:0; color:var(--text); font-size:22px; line-height:1.15; }
.alert-detail-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:8px; color:var(--muted); font-size:12px; }
.alert-detail-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.alert-terminal-note { margin-bottom:12px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:12px; }
.alert-terminal-note.resolved { border-color:color-mix(in srgb,#27ca69 40%,var(--border)); background:color-mix(in srgb,#27ca69 7%,var(--panel)); color:#27ca69; }
.alert-terminal-note.dismissed { background:var(--panel-hover); color:var(--muted); }
.alert-detail-stat-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.alert-detail-stat { min-height:76px; display:flex; flex-direction:column; justify-content:center; gap:7px; padding:13px 14px; }
.alert-detail-stat span { color:var(--muted); font-size:12px; }
.alert-detail-stat strong { color:var(--text); font-size:12.5px; line-height:1.3; }
.alert-detail-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr); gap:12px; margin-bottom:12px; }
.alert-detail-card, .alert-management-card, .alert-resolution-card, .alert-history-card { min-width:0; }
.alert-detail-card-heading { min-height:49px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border-bottom:1px solid var(--border); }
.alert-detail-card-heading h2 { margin:0; color:var(--text); font-size:12.5px; }
.alert-detail-card-heading p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.alert-detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; padding:13px 14px; gap:12px 20px; }
.alert-detail-list > div { min-width:0; padding-bottom:9px; border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent); }
.alert-detail-list > div.wide { grid-column:1 / -1; }
.alert-detail-list dt { margin-bottom:4px; color:var(--muted); font-size:12px; }
.alert-detail-list dd { margin:0; color:var(--text); font-size:12px; line-height:1.45; word-break:break-word; }
.alert-detail-list .mono-copy { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; }
.alert-context-focus { display:flex; min-height:110px; flex-direction:column; justify-content:center; align-items:center; padding:18px; text-align:center; }
.alert-context-focus span { color:var(--muted); font-size:12px; }
.alert-context-focus strong { margin-top:6px; color:var(--text); font-size:14px; }
.alert-context-focus small { margin-top:4px; color:var(--muted); font-size:12px; }
.alert-related-links { display:flex; flex-wrap:wrap; gap:12px; padding:0 14px 14px; }
.alert-related-links a { color:var(--accent); font-size:12px; font-weight:650; text-decoration:none; }
.alert-related-links a:hover { text-decoration:underline; }
.alert-management-card, .alert-resolution-card, .alert-history-card { margin-bottom:12px; }
.alert-management-form { display:grid; grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) auto; gap:10px; align-items:end; padding:14px; }
.alert-management-form label, .alert-comment-form label { display:grid; gap:5px; color:var(--muted); font-size:12px; }
.alert-management-form select, .alert-comment-form textarea { width:100%; border:1px solid var(--border); border-radius:7px; outline:0; background:var(--panel); color:var(--text); font:inherit; }
.alert-management-form select { height:36px; padding:0 9px; font-size:12px; }
.alert-management-form select:focus, .alert-comment-form textarea:focus { border-color:color-mix(in srgb,var(--accent) 60%,var(--border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent); }
.alert-management-form select:disabled { opacity:.6; cursor:not-allowed; }
.alert-resolution-card > p { margin:0; padding:14px; color:var(--text-soft); font-size:12px; line-height:1.55; }
.alert-comment-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; padding:14px; border-bottom:1px solid var(--border); }
.alert-comment-form textarea { min-height:78px; resize:vertical; padding:9px; font-size:12px; line-height:1.45; }
.alert-history-timeline { display:grid; padding:6px 14px 14px; }
.alert-history-entry { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; position:relative; padding:12px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); }
.alert-history-entry:last-child { border-bottom:0; }
.alert-history-marker { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb,#3f8cff 10%,var(--panel)); color:#3f8cff; font-size:12.5px; font-weight:800; }
.alert-history-entry.comment .alert-history-marker { background:color-mix(in srgb,#8b72ed 10%,var(--panel)); color:#8b72ed; }
.alert-history-entry-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.alert-history-entry-head strong { color:var(--text); font-size:12px; }
.alert-history-entry-head time { color:var(--muted); font-size:12px; white-space:nowrap; }
.alert-history-entry p { margin:5px 0 0; color:var(--text-soft); font-size:12px; line-height:1.45; }
.alert-history-entry small { display:block; margin-top:5px; color:var(--muted); font-size:12px; }
.alert-history-empty { padding:28px 10px; color:var(--muted); font-size:12px; text-align:center; }

@media (max-width:1200px) {
    .alert-detail-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .alert-detail-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
    .alert-detail-hero { align-items:flex-start; flex-direction:column; }
    .alert-detail-actions { justify-content:flex-start; }
    .alert-detail-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .alert-management-form { grid-template-columns:1fr; }
    .alert-comment-form { grid-template-columns:1fr; }
}
@media (max-width:520px) {
    .alert-detail-stat-grid, .alert-detail-list { grid-template-columns:1fr; }
    .alert-detail-list > div.wide { grid-column:auto; }
    .alert-history-entry-head { align-items:flex-start; flex-direction:column; gap:3px; }
}

/* ================================================================
   Fase 11.1 · Centro de Reportes
   ================================================================ */
.reports-page,.report-detail-page{min-width:0}.reports-heading{margin-bottom:12px}.report-metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:12px}.report-filterbar{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(150px,.8fr) minmax(150px,.8fr) auto auto;gap:9px;align-items:end;padding:10px;margin-bottom:10px}.report-template-panel{margin-bottom:12px}.report-section-heading{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 14px;border-bottom:1px solid var(--border)}.report-section-heading.compact{min-height:48px}.report-section-heading h2{margin:0;color:var(--text);font-size:12.5px}.report-section-heading p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.4}.report-section-heading>span{color:var(--muted);font-size:12px;white-space:nowrap}.report-template-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:11px}.report-template-card{min-height:160px;display:grid;grid-template-columns:35px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px 9px;padding:13px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--panel) 96%,transparent)}.report-template-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;font-size:15px;font-weight:800}.report-template-icon.green{color:#27ca69;background:color-mix(in srgb,#27ca69 12%,var(--panel))}.report-template-icon.red{color:#ff555d;background:color-mix(in srgb,#ff555d 12%,var(--panel))}.report-template-icon.blue{color:#3f8cff;background:color-mix(in srgb,#3f8cff 12%,var(--panel))}.report-template-icon.amber{color:#f0a51f;background:color-mix(in srgb,#f0a51f 12%,var(--panel))}.report-template-icon.purple{color:#8b72ed;background:color-mix(in srgb,#8b72ed 12%,var(--panel))}.report-template-copy{min-width:0}.report-template-copy h3{margin:1px 0 6px;color:var(--text);font-size:12px}.report-template-copy p{min-height:34px;margin:0;color:var(--muted);font-size:12px;line-height:1.45}.report-template-copy small{display:block;margin-top:10px;color:var(--muted);font-size:12px}.report-template-copy small strong{color:var(--text)}.report-template-action{grid-column:1/-1;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;color:var(--text-soft);background:var(--panel);font-size:12px;font-weight:700;text-decoration:none}.report-template-action:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--panel))}.report-insight-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:12px}.report-insight-panel{min-width:0;overflow:hidden}.report-area-row{display:grid;grid-template-columns:minmax(110px,.9fr) minmax(120px,1.6fr) 68px;gap:10px;align-items:center;padding:9px 13px;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}.report-area-row:last-child{border-bottom:0}.report-area-copy strong,.report-app-copy strong{display:block;color:var(--text);font-size:12px}.report-area-copy span,.report-app-copy span{display:block;margin-top:3px;color:var(--muted);font-size:12px}.report-area-track,.report-app-copy>div{height:8px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--border) 65%,transparent)}.report-area-track i,.report-app-copy>div i{display:block;height:100%;border-radius:inherit;background:#ff555d}.report-area-row>b,.report-app-row>b{color:var(--text);font-size:12px;text-align:right}.report-app-row{display:grid;grid-template-columns:25px minmax(0,1fr) 70px;gap:9px;align-items:center;padding:9px 13px;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}.report-app-row:last-child{border-bottom:0}.report-app-rank{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:color-mix(in srgb,#3f8cff 10%,var(--panel));color:#3f8cff;font-size:12px;font-weight:800}.report-app-copy>div{height:5px;margin-top:6px}.report-app-copy>div i{background:#3f8cff}.report-empty{padding:30px 16px;color:var(--muted);font-size:12px;text-align:center}.report-empty.large{min-height:180px;display:grid;place-items:center}.report-bottom-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.4fr);gap:12px}.report-export-history{min-width:0;overflow:hidden}.report-table-wrap{width:100%;overflow:auto}.report-table{width:100%;border-collapse:collapse;min-width:600px}.report-table.wide{min-width:820px}.report-table th,.report-table td{padding:9px 10px;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);text-align:left;white-space:nowrap}.report-table th{color:var(--muted);font-size:12px;font-weight:650}.report-table td{max-width:270px;overflow:hidden;text-overflow:ellipsis;color:var(--text-soft);font-size:12px}.report-format-badge{display:inline-flex;padding:3px 6px;border:1px solid color-mix(in srgb,#27ca69 40%,var(--border));border-radius:5px;background:color-mix(in srgb,#27ca69 7%,var(--panel));color:#27ca69;font-size:12px;font-weight:700}.report-export-capability{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:18px}.report-export-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,#27ca69 10%,var(--panel));color:#27ca69;font-size:16px}.report-export-capability.disabled .report-export-icon{background:var(--panel-hover);color:var(--muted)}.report-export-capability h2{margin:12px 0 4px;color:var(--text);font-size:12.5px}.report-export-capability strong{color:#27ca69;font-size:14px}.report-export-capability.disabled strong{color:var(--muted)}.report-export-capability p{margin:8px 0;color:var(--text-soft);font-size:12px;line-height:1.5}.report-export-capability small{color:var(--muted);font-size:12px;line-height:1.45}.report-breadcrumb{display:flex;align-items:center;gap:7px;margin-bottom:9px;color:var(--muted);font-size:12px}.report-breadcrumb a{color:var(--accent);text-decoration:none}.report-detail-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.report-detail-stat{min-height:76px;display:flex;flex-direction:column;justify-content:center;padding:13px 14px}.report-detail-stat span{color:var(--muted);font-size:12px}.report-detail-stat strong{margin-top:7px;color:var(--text);font-size:12.5px}.success-text{color:#27ca69!important}.muted-text{color:var(--muted)!important}.report-filterbar.detail{grid-template-columns:minmax(180px,1.1fr) minmax(150px,.8fr) minmax(150px,.8fr) auto auto}.report-detail-table-panel{min-width:0;overflow:hidden;margin-bottom:10px}.report-table-footer{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 13px;color:var(--muted);font-size:12px}.report-pagination{display:flex;align-items:center;gap:10px}.report-pagination form label{display:flex;align-items:center;gap:6px}.report-pagination select{height:29px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);font-size:12px}.report-pagination>a,.report-pagination>span,.report-pagination>strong{min-width:25px;height:25px;display:grid;place-items:center;border:1px solid var(--border);border-radius:5px;color:var(--text-soft);font-size:12px;text-decoration:none}.report-pagination>strong{border-color:var(--accent);color:var(--accent)}.report-readonly-note{padding:9px 11px;border:1px dashed var(--border);border-radius:7px;color:var(--muted);font-size:12px;background:color-mix(in srgb,var(--panel) 88%,transparent)}
@media(max-width:1450px){.report-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.report-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.report-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-insight-layout,.report-bottom-layout{grid-template-columns:1fr}.report-filterbar,.report-filterbar.detail{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.reports-heading{align-items:flex-start;flex-direction:column}.report-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-template-grid{grid-template-columns:1fr}.report-filterbar,.report-filterbar.detail{grid-template-columns:1fr}.report-detail-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-area-row{grid-template-columns:1fr}.report-area-row>b{text-align:left}.report-table-footer{align-items:flex-start;flex-direction:column;padding:10px 12px}}
@media(max-width:520px){.report-metric-grid,.report-detail-stat-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
 | Reports · Phase 11.2
 | Advanced contract-aware filters + real CSV export.
 * -------------------------------------------------------------------------- */
.report-export-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.report-export-error{border-color:color-mix(in srgb,#ff555d 45%,var(--border));background:color-mix(in srgb,#ff555d 7%,var(--panel));color:#ff555d}.report-advanced-filter-panel{margin-bottom:10px;overflow:hidden}.report-advanced-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:9px;align-items:end;padding:11px 13px}.report-advanced-filter-grid .filter-control{min-width:0}.report-advanced-filter-grid .filter-control input,.report-advanced-filter-grid .filter-control select{width:100%}.report-filter-search{grid-column:span 2}.report-filter-actions{display:flex;gap:8px;align-items:center;align-self:end}.report-filter-actions .secondary-button{min-height:34px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}
@media(max-width:1250px){.report-advanced-filter-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}}
@media(max-width:900px){.report-advanced-filter-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}.report-filter-search{grid-column:span 2}}
@media(max-width:620px){.report-advanced-filter-grid{grid-template-columns:1fr}.report-filter-search{grid-column:auto}.report-filter-actions{flex-wrap:wrap}}

/* --------------------------------------------------------------------------
 | Administration · Phase 12.1
 * -------------------------------------------------------------------------- */
.administration-page{padding-bottom:28px}.administration-heading{align-items:center}.administration-phase-badge{display:inline-flex;align-items:center;height:28px;padding:0 9px;border:1px solid var(--border);border-radius:7px;background:var(--panel);color:var(--muted);font-size:12px;font-weight:700}.administration-metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:12px}.admin-metric-word{font-size:15px!important}.administration-tabs{display:flex;gap:4px;min-height:44px;align-items:flex-end;padding:0 10px;margin-bottom:10px;border:1px solid var(--border);border-radius:7px;background:var(--panel);overflow:auto}.administration-tab{position:relative;display:flex;align-items:center;justify-content:center;min-width:max-content;height:43px;padding:0 14px;color:var(--muted);font-size:12px;text-decoration:none}.administration-tab.active{color:var(--text);font-weight:750}.administration-tab.active:after{content:"";position:absolute;left:5px;right:5px;bottom:-1px;height:2px;background:var(--accent);border-radius:2px 2px 0 0}.administration-two-column{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,.55fr);gap:12px}.administration-main-panel,.administration-side-panel,.administration-audit-panel{min-width:0;overflow:hidden}.administration-section-heading{min-height:55px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border-bottom:1px solid var(--border)}.administration-section-heading h2,.administration-side-panel h2,.administration-security-panel h2,.administration-security-health h2{margin:0;color:var(--text);font-size:12.5px}.administration-section-heading p,.administration-side-panel header p,.administration-security-panel header p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.45}.administration-table-wrap{width:100%;overflow:auto}.administration-table{width:100%;border-collapse:collapse;min-width:760px}.administration-table th,.administration-table td{padding:9px 11px;border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent);text-align:left;white-space:nowrap}.administration-table th{color:var(--muted);font-size:12px;font-weight:650}.administration-table td{color:var(--text-soft);font-size:12px}.administration-table td strong{color:var(--text)}.administration-user-cell{display:flex;align-items:center;gap:8px}.administration-user-cell>span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,#3f8cff 16%,var(--panel));color:#3f8cff;font-size:12px;font-weight:800}.administration-user-cell div{display:flex;min-width:0;flex-direction:column}.administration-user-cell small,.administration-id{display:block;margin-top:2px;color:var(--muted);font-size:12px}.administration-status{display:inline-flex;align-items:center;min-height:21px;padding:0 7px;border:1px solid var(--border);border-radius:5px;background:var(--panel-hover);color:var(--text-soft);font-size:12px;font-weight:700}.administration-status.status-active{color:#27ca69;border-color:color-mix(in srgb,#27ca69 35%,var(--border));background:color-mix(in srgb,#27ca69 7%,var(--panel))}.administration-status.status-suspended{color:#f0a51f;border-color:color-mix(in srgb,#f0a51f 35%,var(--border));background:color-mix(in srgb,#f0a51f 7%,var(--panel))}.administration-status.status-disabled{color:#ff555d;border-color:color-mix(in srgb,#ff555d 35%,var(--border));background:color-mix(in srgb,#ff555d 7%,var(--panel))}.administration-side-stack{display:flex;flex-direction:column;gap:12px}.administration-side-panel>header,.administration-security-panel>header,.administration-security-health>header{padding:13px 14px;border-bottom:1px solid var(--border)}.administration-catalog-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent)}.administration-catalog-row:last-child{border-bottom:0}.administration-catalog-row div{display:flex;min-width:0;flex-direction:column}.administration-catalog-row strong{color:var(--text);font-size:12px}.administration-catalog-row small{margin-top:3px;color:var(--muted);font-size:12px;line-height:1.35}.administration-type-badge{display:inline-flex;padding:3px 6px;border-radius:5px;border:1px solid var(--border);font-size:12px;font-weight:700}.administration-type-badge.system{color:#8b72ed;border-color:color-mix(in srgb,#8b72ed 35%,var(--border));background:color-mix(in srgb,#8b72ed 7%,var(--panel))}.administration-type-badge.custom{color:#3f8cff;border-color:color-mix(in srgb,#3f8cff 35%,var(--border));background:color-mix(in srgb,#3f8cff 7%,var(--panel))}.administration-note-card{display:flex;align-items:flex-start;gap:9px;padding:13px}.administration-note-card>strong{width:23px;height:23px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:color-mix(in srgb,#3f8cff 10%,var(--panel));color:#3f8cff}.administration-note-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.administration-empty{padding:34px 14px;color:var(--muted);font-size:12px;text-align:center}.administration-empty.compact{padding:18px 12px}.administration-schedule-card{padding:11px 13px;border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent)}.administration-schedule-card>div{display:flex;justify-content:space-between;gap:8px}.administration-schedule-card strong{color:var(--text);font-size:12px}.administration-schedule-card span{color:var(--muted);font-size:12px}.administration-schedule-card small{display:block;margin:5px 0 8px;color:var(--text-soft);font-size:12px}.administration-definition-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:3px 14px 14px}.administration-definition-grid>div{padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent)}.administration-definition-grid>div:nth-child(odd){padding-right:18px}.administration-definition-grid>div:nth-child(even){padding-left:18px;border-left:1px solid color-mix(in srgb,var(--border) 65%,transparent)}.administration-definition-grid dt{color:var(--muted);font-size:12px}.administration-definition-grid dd{margin:5px 0 0;color:var(--text);font-size:12px;font-weight:700}.administration-security-grid{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1fr) minmax(0,1fr);gap:12px}.administration-security-panel.permissions{grid-column:1/-1}.administration-health-ring{width:112px;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:18px auto;border:11px solid color-mix(in srgb,#27ca69 75%,var(--border));border-radius:50%}.administration-health-ring strong{color:var(--text);font-size:24px}.administration-health-ring span{margin-top:2px;color:var(--muted);font-size:12px}.administration-health-list{padding:0 14px 14px}.administration-health-list>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent);font-size:12px}.administration-health-list span{color:var(--text-soft)}.administration-health-list b{color:var(--text)}.administration-permission-cloud{display:flex;flex-wrap:wrap;gap:6px;padding:13px}.administration-permission-cloud span{display:inline-flex;padding:5px 7px;border:1px solid var(--border);border-radius:6px;background:var(--panel-hover);color:var(--text-soft);font-size:12px}.administration-audit-filters{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:9px;align-items:end;padding:11px 13px;border-bottom:1px solid var(--border)}.administration-audit-filters>.secondary-button{min-height:34px;display:flex;align-items:center;justify-content:center;text-decoration:none}.administration-table.audit{min-width:980px}.administration-table.audit code{color:var(--muted);font-size:12px}.administration-table-footer{min-height:49px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 13px;color:var(--muted);font-size:12px}.administration-pagination{display:flex;align-items:center;gap:8px}.administration-pagination form label{display:flex;align-items:center;gap:6px}.administration-pagination select{height:29px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);font-size:12px}.administration-pagination>a,.administration-pagination>span,.administration-pagination>strong{min-width:25px;height:25px;display:grid;place-items:center;border:1px solid var(--border);border-radius:5px;color:var(--text-soft);font-size:12px;text-decoration:none}.administration-pagination>strong{border-color:var(--accent);color:var(--accent)}.administration-next{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;border-style:dashed}.administration-next strong{color:var(--text);font-size:12px}.administration-next span{color:var(--muted);font-size:12px}
@media(max-width:1450px){.administration-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.administration-security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.administration-security-panel.permissions{grid-column:1/-1}}
@media(max-width:1050px){.administration-two-column{grid-template-columns:1fr}.administration-audit-filters{grid-template-columns:repeat(2,minmax(140px,1fr))}}
@media(max-width:760px){.administration-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.administration-security-grid{grid-template-columns:1fr}.administration-security-panel.permissions{grid-column:auto}.administration-definition-grid{grid-template-columns:1fr}.administration-definition-grid>div:nth-child(even){padding-left:0;border-left:0}.administration-definition-grid>div:nth-child(odd){padding-right:0}.administration-audit-filters{grid-template-columns:1fr}.administration-table-footer{align-items:flex-start;flex-direction:column;padding:10px 12px}}
@media(max-width:520px){.administration-metric-grid{grid-template-columns:1fr}}

/* Administration Phase 12.2 ------------------------------------------------ */
.administration-form-page{max-width:1540px;margin:0 auto}.administration-form-card{padding:18px}.administration-form-card h2{margin:0 0 14px;color:var(--text);font-size:13px}.administration-form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:13px}.administration-form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.administration-form-grid label{display:flex;flex-direction:column;gap:6px;color:var(--text-soft);font-size:12px}.administration-form-grid label.full{grid-column:1/-1}.administration-form-grid input,.administration-form-grid select,.administration-form-grid textarea,.administration-relation-grid select,.administration-form-card>form select{width:100%;min-height:38px;padding:8px 10px;border:1px solid var(--border);border-radius:7px;background:var(--panel);color:var(--text);font:inherit}.administration-form-grid textarea{resize:vertical}.administration-form-grid input:disabled,.administration-form-grid textarea:disabled{opacity:.65;background:var(--panel-hover)}.administration-form-grid small,.administration-help{color:var(--muted);font-size:12px;line-height:1.45}.administration-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}.administration-form-actions .secondary-button,.administration-form-actions .btn-primary{min-height:36px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.administration-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.administration-detail-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px;margin-bottom:12px}.administration-detail-hero>div:first-child{display:flex;align-items:center;gap:12px}.administration-detail-hero h1{margin:0;color:var(--text);font-size:18px}.administration-detail-hero p{margin:4px 0 0;color:var(--muted);font-size:12px}.administration-avatar{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#315eaa,#6650bf);color:#fff;font-weight:800}.administration-inline-actions{display:flex;align-items:center;gap:8px}.administration-inline-actions .btn-secondary{display:inline-flex;align-items:center;min-height:33px;text-decoration:none}.administration-note-inline{padding:9px 11px;margin-bottom:12px;border:1px solid color-mix(in srgb,#3f8cff 28%,var(--border));border-radius:7px;background:color-mix(in srgb,#3f8cff 6%,var(--panel));color:var(--muted);font-size:12px;line-height:1.5}.administration-relation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.administration-relation-grid h3{margin:0 0 8px;color:var(--text);font-size:12px}.administration-relation-grid form,.administration-form-card>form{display:flex;gap:7px;margin-top:8px}.administration-relation-grid form select,.administration-form-card>form select{flex:1}.administration-row-link{display:inline-flex;align-items:center;color:var(--accent);font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}.administration-row-link:hover{text-decoration:underline}.administration-compact-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid var(--border)}.administration-catalog-actions{display:flex!important;flex-direction:row!important;align-items:center;gap:7px}.administration-schedule-card>.administration-row-link{margin-top:8px}.administration-error-list{margin:5px 0 0;padding-left:16px}.administration-schedule-editor{display:grid;gap:7px;margin-top:16px}.administration-schedule-editor>div{display:grid;grid-template-columns:140px minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end;padding:9px 11px;border:1px solid var(--border);border-radius:7px;background:var(--panel-hover)}.administration-schedule-editor strong{align-self:center;color:var(--text);font-size:12px}.administration-schedule-editor label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:12px}.administration-schedule-editor input{min-height:34px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text)}.administration-delete-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 14px;border:1px solid color-mix(in srgb,#ff555d 30%,var(--border));border-radius:8px;background:color-mix(in srgb,#ff555d 5%,var(--panel));color:var(--muted);font-size:12px}.danger-button{min-height:34px;padding:0 12px;border:1px solid color-mix(in srgb,#ff555d 55%,var(--border));border-radius:7px;background:color-mix(in srgb,#ff555d 8%,var(--panel));color:#ff555d;font-weight:750;cursor:pointer}.administration-audit-json-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}.administration-json-card{min-width:0;padding:14px}.administration-json-card h2{margin:0 0 10px;color:var(--text);font-size:12.5px}.administration-json-card pre{max-height:420px;overflow:auto;margin:0;padding:11px;border:1px solid var(--border);border-radius:7px;background:var(--panel-hover);color:var(--text-soft);font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word}.administration-json-card p{color:var(--muted);font-size:12px}.dashboard-success{margin:0 0 12px;padding:10px 12px;border:1px solid color-mix(in srgb,#27ca69 35%,var(--border));border-radius:7px;background:color-mix(in srgb,#27ca69 7%,var(--panel));color:#27ca69;font-size:12px}.module-back-link{display:inline-flex;margin-bottom:8px;color:var(--accent);font-size:12px;text-decoration:none}
@media(max-width:1100px){.administration-detail-grid,.administration-audit-json-grid{grid-template-columns:1fr}.administration-form-grid.two,.administration-relation-grid{grid-template-columns:1fr}.administration-schedule-editor>div{grid-template-columns:110px 1fr 1fr}}
@media(max-width:700px){.administration-schedule-editor>div{grid-template-columns:1fr}.administration-detail-hero{align-items:flex-start;flex-direction:column}.administration-inline-actions{width:100%;justify-content:flex-end}.administration-form-actions{flex-wrap:wrap}}

/* ========================================================================== */
/* Phase 13.2A - Readability & accessibility                                  */
/* ========================================================================== */
/*
 * This phase intentionally prioritizes legibility over maximum information
 * density. Dense tables keep horizontal scrolling instead of shrinking text
 * into the 6-10 px range used by early prototype screens.
 */
:root {
    --focus-ring: color-mix(in srgb, var(--accent) 72%, white 8%);
    --control-height: 42px;
    --compact-control-height: 38px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Stronger light-theme contrast for secondary and accent text. */
html[data-theme="light"] {
    --muted: #5f6c79;
    --accent: #d63b44;
    --accent-hover: #c9353d;
    --accent-soft: rgba(214, 59, 68, .12);
    --red: #d63b44;
}

/* Keyboard focus must remain visible in both themes. */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Form controls: readable text and comfortable click/touch targets. */
.page-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.page-content select,
.page-content textarea {
    min-height: var(--control-height);
    font-size: 14px;
    line-height: 1.35;
}

.page-content textarea {
    padding-top: 10px;
    padding-bottom: 10px;
}

.primary-button,
.secondary-button,
.btn-primary,
.btn-secondary,
.danger-button,
.text-danger-button,
.report-export-button {
    min-height: var(--control-height);
    font-size: 13px;
    line-height: 1.2;
}

.small-action-button,
.row-menu-button {
    min-width: 36px;
    min-height: 36px;
    font-size: 12px;
}

/* Keep tables readable. Existing wrappers already provide horizontal scroll. */
.page-content table {
    font-size: 13px;
    line-height: 1.4;
}

.page-content table th {
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .01em;
}

.page-content table td {
    font-size: 13px;
    line-height: 1.4;
}

/* Titles and section headings need a clear hierarchy after enlarging body copy. */
.page-content h2 {
    line-height: 1.25;
}

.page-content h3 {
    line-height: 1.3;
}

/* Secondary copy remains visually quieter without becoming microscopic. */
.muted,
.panel-subtitle,
.updated-note,
.prototype-note,
.field-error,
.activity-disclaimer,
.employee-disclaimer,
.page-warning,
.report-readonly-note,
.administration-note-inline,
.administration-help {
    line-height: 1.5;
}

/* Compact status elements remain compact, but no longer rely on tiny text. */
.badge,
.coverage-pill,
.boolean-indicator,
.administration-status,
.administration-type-badge,
.report-format-badge,
.alert-readonly-note {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.1;
}

/* Dense report/admin tables should scroll rather than compress typography. */
.report-table-wrap,
.administration-table-wrap,
.alert-table-wrap,
.employee-table-wrap,
.asset-table-wrap,
.assignment-table-wrap,
.maintenance-table-wrap,
.agent-table-wrap,
.data-table-wrap {
    scrollbar-gutter: stable;
}

/* Improve accent readability on the light palette for text links and badges. */
html[data-theme="light"] .panel-link,
html[data-theme="light"] .module-back-link,
html[data-theme="light"] .administration-row-link,
html[data-theme="light"] .report-template-action,
html[data-theme="light"] .login-options a {
    color: var(--accent);
}

html[data-theme="light"] .badge-red,
html[data-theme="light"] .text-danger-button,
html[data-theme="light"] .danger-button {
    color: #b92f37;
}

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


/* ========================================================================== */
/* Phase 13.2A.1 - Button clarity & visual consistency                        */
/* ========================================================================== */
/*
 * Some newer modules introduced .btn-primary / .btn-secondary and bare
 * .filter-submit / .filter-clear controls after the original button system
 * was created. Those classes inherited typography but not a complete visual
 * treatment, so browsers rendered several actions like plain/default controls.
 * This section unifies all actionable controls without changing PHP/Blade.
 */
:root {
    --button-radius: 8px;
    --button-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 18%, transparent);
    --button-shadow-hover: 0 7px 20px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Base behavior shared by the two button systems used across NoxSyn. */
.primary-button,
.btn-primary,
.secondary-button,
.btn-secondary,
.filter-submit,
.filter-clear,
.report-export-button,
.danger-button,
.text-danger-button {
    appearance: none;
    -webkit-appearance: none;
    min-height: var(--control-height);
    padding: 0 16px;
    border-radius: var(--button-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .12s ease, opacity .15s ease;
}

/* Primary action: unmistakable call-to-action. */
.primary-button,
.btn-primary,
.filter-submit,
.report-export-button {
    border: 1px solid color-mix(in srgb, var(--accent) 82%, #000 4%);
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent-hover) 88%, white 12%));
    color: #fff;
    box-shadow: var(--button-shadow);
}

.primary-button:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.filter-submit:hover:not(:disabled),
.report-export-button:hover:not([aria-disabled="true"]) {
    border-color: var(--accent-hover);
    background: linear-gradient(135deg, var(--accent-hover), color-mix(in srgb, var(--accent-hover) 82%, white 18%));
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-1px);
    color: #fff;
}

.primary-button:active:not(:disabled),
.btn-primary:active:not(:disabled),
.filter-submit:active:not(:disabled),
.report-export-button:active:not([aria-disabled="true"]) {
    transform: translateY(0);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Secondary action: still looks like a button, but does not compete with CTA. */
.secondary-button,
.btn-secondary,
.filter-clear {
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    color: var(--text);
    box-shadow: 0 1px 2px color-mix(in srgb, #000 12%, transparent);
}

.secondary-button:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.filter-clear:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-strong));
    background: var(--panel-hover);
    color: var(--text);
    transform: translateY(-1px);
}

.secondary-button:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.filter-clear:active {
    transform: translateY(0);
}

/* Disabled actions remain visibly button-shaped, but clearly unavailable. */
.primary-button:disabled,
.btn-primary:disabled,
.secondary-button:disabled,
.btn-secondary:disabled,
.filter-submit:disabled,
button[disabled].danger-button {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
    box-shadow: none;
}

.btn-primary:disabled,
.primary-button:disabled {
    border-color: var(--border-strong);
    background: var(--panel-hover);
    color: var(--muted);
}

.btn-secondary:disabled,
.secondary-button:disabled {
    border-color: var(--border);
    background: var(--panel-2);
    color: var(--muted);
}

/* Filter bars: Apply is primary; Reset/Clear is outlined and equally clickable. */
.filter-submit,
.filter-clear {
    min-height: var(--control-height);
    padding-inline: 17px;
}

/* Compact row actions in Administration were previously styled as plain links. */
.administration-row-link {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: color-mix(in srgb, var(--accent) 5%, var(--panel));
    color: var(--accent);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                transform .12s ease;
}

.administration-row-link:hover {
    border-color: color-mix(in srgb, var(--accent) 68%, var(--border));
    background: color-mix(in srgb, var(--accent) 11%, var(--panel));
    color: var(--accent-hover);
    text-decoration: none;
    transform: translateY(-1px);
}

/* Make report card actions read as controls rather than underlined/text links. */
.report-template-action {
    min-height: 38px;
    padding: 0 12px;
    border-color: var(--border-strong);
    border-radius: 7px;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    color: var(--text);
    font-size: 12.5px;
    font-weight: 750;
    box-shadow: 0 1px 2px color-mix(in srgb, #000 10%, transparent);
}

.report-template-action:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 7%, var(--panel));
    color: var(--accent);
    transform: translateY(-1px);
}

/* Destructive controls should also look actionable, not like plain red text. */
.danger-button,
.text-danger-button {
    border: 1px solid color-mix(in srgb, var(--red) 48%, var(--border));
    background: color-mix(in srgb, var(--red) 8%, var(--panel));
    color: color-mix(in srgb, var(--red) 90%, white 10%);
    box-shadow: none;
}

.danger-button:hover:not(:disabled),
.text-danger-button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--red) 72%, var(--border));
    background: color-mix(in srgb, var(--red) 14%, var(--panel));
    color: color-mix(in srgb, var(--red) 82%, white 18%);
    transform: translateY(-1px);
}

.danger-button.solid {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* Small utility/menu controls retain compact size but gain a clear hover surface. */
.small-action-button,
.row-menu-button {
    border-color: var(--border);
    background: var(--panel);
    color: var(--text-soft);
}

.small-action-button:hover:not(:disabled),
.row-menu-button:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--panel-hover);
    color: var(--text);
}

/* Keep action groups aligned when a module mixes legacy and new button classes. */
.module-heading-actions,
.directory-actions,
.assignments-heading-actions,
.maintenance-heading-actions,
.agents-heading-actions,
.alerts-heading .module-heading-actions,
.administration-form-actions,
.administration-inline-actions,
.report-filter-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

/* Light theme: preserve contrast while keeping the same visual hierarchy. */
html[data-theme="light"] .secondary-button,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .filter-clear,
html[data-theme="light"] .report-template-action {
    background: #fff;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(30, 55, 78, .08);
}

html[data-theme="light"] .administration-row-link {
    background: color-mix(in srgb, var(--accent) 4%, #fff);
}

@media (max-width: 700px) {
    .module-heading-actions {
        width: 100%;
    }

    .module-heading-actions > .primary-button,
    .module-heading-actions > .btn-primary,
    .module-heading-actions > .secondary-button,
    .module-heading-actions > .btn-secondary {
        flex: 1 1 160px;
    }
}


.administration-role-chip-list{display:flex;flex-wrap:wrap;gap:6px;min-width:170px}
.administration-role-chip{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,var(--panel));color:var(--text);font-size:11.5px;font-weight:650;line-height:1.2}
.administration-role-chip.muted{border-color:var(--border);background:var(--panel-hover);color:var(--muted);font-weight:600}
.administration-assigned-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.administration-assigned-block h3{margin:0 0 10px;color:var(--text);font-size:12px}
.administration-assigned-list{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.administration-assigned-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel-hover)}
.btn-compact{min-height:30px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}
.administration-note-inline.compact{margin-bottom:10px}

.activity-event-origin{display:flex;flex-direction:column;gap:2px;min-width:140px}.activity-event-origin strong{color:var(--text);font-size:12px}.activity-event-origin small{color:var(--muted);font-size:11px}

/* ========================================================================== 
   Spec 080 / #42 · Quick create modals (Areas and Roles)
   ========================================================================== */
body.administration-modal-open {
    overflow: hidden;
}

.administration-quick-modal[hidden] {
    display: none !important;
}

.administration-quick-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(2, 10, 20, .68);
    backdrop-filter: blur(4px);
}

.administration-quick-modal-card {
    width: min(680px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow: auto;
    padding: 22px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
}

.administration-quick-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.administration-quick-modal-header h2 {
    margin: 0 0 5px;
    color: var(--text);
    font-size: 19px;
}

.administration-quick-modal-header p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.administration-modal-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel-hover);
    color: var(--text-soft);
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.administration-modal-close:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.administration-quick-errors {
    margin-bottom: 15px;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--red) 42%, var(--border));
    border-radius: 9px;
    background: color-mix(in srgb, var(--red) 9%, var(--panel));
    color: var(--text);
    font-size: 13px;
}

.administration-quick-errors strong {
    display: block;
    margin-bottom: 5px;
    color: var(--red);
}

.administration-quick-errors ul {
    margin: 0;
    padding-left: 18px;
}

.administration-quick-errors li + li {
    margin-top: 3px;
}

.administration-quick-modal .administration-form-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .administration-quick-modal {
        padding: 12px;
        align-items: end;
    }

    .administration-quick-modal-card {
        width: 100%;
        max-height: calc(100vh - 24px);
        padding: 18px;
        border-radius: 14px 14px 10px 10px;
    }

    .administration-quick-modal .administration-form-grid.two {
        grid-template-columns: 1fr;
    }
}


/* Issues #53, #77 y #171 — estados y feedback que deben distinguirse visualmente. */
#copy-pairing-token.copy-success,
[data-copy-pairing-token].copy-success {
    border-color: color-mix(in srgb, #27ca69 70%, var(--border));
    color: #27ca69;
}

.activity-no-data-reason {
    display: inline-flex !important;
    width: fit-content;
    margin-top: 3px;
    padding: 3px 7px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 999px;
    background: var(--panel-hover);
    color: var(--text-soft) !important;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.25;
}
.activity-no-data-reason.agent-offline { color: #ff666d !important; border-color: color-mix(in srgb, #ff555d 42%, var(--border)); }
.activity-no-data-reason.agent-delayed { color: #f0a91f !important; border-color: color-mix(in srgb, #f0a91f 42%, var(--border)); }
.activity-no-data-reason.no-activity-in-range { color: var(--muted) !important; }

.activity-no-data-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 10px;
    align-items: center;
    margin: 0 0 12px;
    padding: 11px 14px;
    border: 1px solid color-mix(in srgb, #f0a91f 38%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, #f0a91f 8%, var(--panel));
}
.activity-no-data-banner strong { color: var(--text); font-size: 13px; }
.activity-no-data-banner span { color: var(--text-soft); font-size: 13px; }

.activity-timeline-legend .powered-off i,
.activity-timeline-track > i.powered-off,
.activity-event-dot.powered-off { background: #607086; }
.activity-timeline-legend .suspended i,
.activity-timeline-track > i.suspended,
.activity-event-dot.suspended { background: #4d8fe8; }

/* Issues #28 / #38 — recuperación y perfil con formularios claros y legibles. */
.auth-recovery-card { width:min(720px, calc(100% - 40px)); }
.auth-recovery-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px; }
.auth-recovery-option { min-width:0; padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--panel-hover); }
.auth-recovery-option > div { margin-bottom:13px; }
.auth-recovery-option h2 { margin:0 0 5px; color:var(--text); font-size:16px; }
.auth-recovery-option p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.auth-recovery-step { width:27px; height:27px; display:grid; place-items:center; margin-bottom:10px; border-radius:50%; background:color-mix(in srgb,var(--accent) 14%,var(--panel)); color:var(--accent); font-weight:800; }
.auth-recovery-option .login-form { margin-top:0; }
.auth-recovery-card > .login-link-button { display:inline-flex; margin-top:18px; text-decoration:none; }
.administration-form-grid label.administration-form-span-2 { grid-column:1/-1; }
.administration-form-control-static { display:flex; flex-direction:column; gap:6px; min-height:42px; }
.administration-form-control-static span { color:var(--text-soft); font-size:12px; }
.administration-form-control-static strong { min-height:42px; display:flex; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:7px; background:var(--panel-hover); color:var(--text); font-size:13px; }
@media(max-width:760px){ .auth-recovery-options{grid-template-columns:1fr;} .auth-recovery-card{width:calc(100% - 24px);} }


/* Spec 084 · Asset loss/theft procedure */
.asset-row-retired { opacity: .58; transition: opacity .15s ease; }
.asset-row-retired:hover { opacity: .82; }
.asset-retired-label { display:block; margin-top:5px; color:var(--muted); font-size:11.5px; }

.asset-loss-panel {
    margin: 16px 0;
    padding: 20px;
    border-color: color-mix(in srgb, var(--red) 35%, var(--border));
}
.asset-loss-panel.is-closed { border-color: var(--border-strong); }
.asset-loss-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.asset-loss-header h2 { margin:10px 0 4px; font-size:21px; }
.asset-loss-header p { margin:0; color:var(--muted); max-width:760px; }
.asset-loss-closed-at { min-width:180px; text-align:right; }
.asset-loss-closed-at span,
.asset-loss-summary span { display:block; color:var(--muted); font-size:12px; margin-bottom:4px; }
.asset-loss-closed-at strong,
.asset-loss-summary strong { font-size:14px; }

.asset-loss-summary {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
}
.asset-loss-summary > div {
    min-height:72px;
    padding:12px 14px;
    border:1px solid var(--border);
    background:var(--panel-2);
    border-radius:var(--radius-sm);
}
.asset-loss-summary .panel-link { font-weight:700; }

.asset-loss-actions-grid {
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
    gap:12px;
    margin-top:16px;
}
.asset-loss-record-form,
.asset-loss-close-form {
    padding:16px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--panel-2);
}
.asset-loss-record-form {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(180px,.55fr) minmax(220px,.8fr) auto;
    gap:12px;
    align-items:end;
}
.asset-loss-record-form > div:first-child { align-self:center; }
.asset-loss-record-form h3,
.asset-loss-close-form h3 { margin:0 0 4px; font-size:15px; }
.asset-loss-record-form p,
.asset-loss-close-form p { margin:0; color:var(--muted); font-size:12.5px; }
.asset-loss-close-form { display:flex; flex-direction:column; justify-content:space-between; gap:16px; }

.asset-loss-missing {
    margin-top:16px;
    padding:14px 16px;
    border:1px solid color-mix(in srgb, var(--amber) 45%, var(--border));
    background:color-mix(in srgb, var(--amber) 8%, var(--panel));
    border-radius:var(--radius-sm);
}
.asset-loss-missing > strong { display:block; margin-bottom:3px; }
.asset-loss-missing > p { margin:0; color:var(--muted); }
.asset-loss-missing ul { margin:10px 0 0; padding:0; list-style:none; display:grid; gap:7px; }
.asset-loss-missing li { display:flex; justify-content:space-between; gap:14px; align-items:center; }

@media (max-width: 1050px) {
    .asset-loss-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .asset-loss-actions-grid { grid-template-columns:1fr; }
    .asset-loss-record-form { grid-template-columns:1fr 1fr; }
}
@media (max-width: 700px) {
    .asset-loss-header { flex-direction:column; }
    .asset-loss-closed-at { text-align:left; }
    .asset-loss-summary,
    .asset-loss-record-form { grid-template-columns:1fr; }
    .asset-loss-missing li { align-items:flex-start; flex-direction:column; gap:3px; }
}