/* Karasena ASM — Design Tokens & Auth Styles
   Source of truth: DESIGN_SYSTEM.md
*/

:root {
    /* Brand (purples) */
    --k-primary: #6A2C6F;
    --k-primary-600: #7A4A7F;
    --k-primary-700: #693b6e;
    --k-primary-400: #99579d;
    --k-primary-300: #cb85cd;
    --k-primary-050: #f9f0fa;

    /* Accents */
    --k-gold: #FFB833;
    --k-coral: #ff6336;
    --k-coral-300: #fd8361;
    --k-info: #7944DE;
    --k-teal: #44DEC6;
    --k-success: #28a745;

    /* Surfaces & text */
    --k-bg: #f6f1f7;
    --k-surface: #ffffff;
    --k-border: #ecdcee;
    --k-text: #3a2d3c;
    --k-muted: #8a7d8c;

    /* Layout */
    --k-radius: 14px;
    --k-radius-sm: 10px;
    --k-shadow: 0 2px 10px rgba(106, 44, 111, 0.08);
    --k-shadow-lg: 0 8px 28px rgba(106, 44, 111, 0.16);
    --k-transition: .22s cubic-bezier(.4, 0, .2, 1);

    /* Typography */
    --k-font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --k-font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* === Base === */

html { font-size: 17px; }

body {
    font-family: var(--k-font);
    color: var(--k-text);
    margin: 0;
    background:
        radial-gradient(1100px 560px at 100% -5%, rgba(255, 99, 54, .07), transparent 60%),
        radial-gradient(900px 520px at -5% 105%, rgba(255, 131, 97, .055), transparent 58%),
        #ffffff;
    background-attachment: fixed;
    min-height: 100vh;
}

*, *::before, *::after {
    box-sizing: border-box;
}

a { color: var(--k-primary); text-decoration: none; }
a:hover { color: var(--k-primary-400); }

/* === Auth layout === */

.auth-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.auth-card {
    display: flex;
    max-width: 880px;
    width: 100%;
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius);
    box-shadow: var(--k-shadow-lg);
    overflow: hidden;
    background: var(--k-surface);
}

/* Brand panel (left) */
.auth-brand {
    flex: 0 0 340px;
    background: var(--k-primary);
    color: #fff;
    padding: 38px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.auth-brand::before,
.auth-brand::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .10);
}

.auth-brand::before {
    width: 300px;
    height: 300px;
    top: -80px;
    right: -100px;
}

.auth-brand::after {
    width: 200px;
    height: 200px;
    bottom: -60px;
    left: -50px;
}

.auth-brand h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: .02em;
    position: relative;
}

.auth-brand .auth-logo {
    position: relative;
    display: block;
    width: 100%;
    max-width: 230px;
    height: auto;
    margin: 0 0 14px;
}

.auth-brand p {
    font-size: .88rem;
    opacity: .8;
    margin: 0;
    line-height: 1.5;
    position: relative;
}

.auth-brand .gold-dot {
    width: 14px;
    height: 14px;
    background: var(--k-gold);
    border-radius: 50%;
    margin-bottom: 20px;
    position: relative;
}

/* Form panel (right) */
.auth-form {
    flex: 1;
    padding: 42px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-form h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--k-text);
}

.auth-form .subtitle {
    font-size: .82rem;
    color: var(--k-muted);
    margin: 0 0 28px;
}

/* Form elements */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--k-muted);
    margin-bottom: 6px;
}

.k-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-sm);
    background: var(--k-surface);
    font-family: var(--k-font);
    font-size: .95rem;
    color: var(--k-text);
    transition: border-color var(--k-transition), box-shadow var(--k-transition);
    outline: none;
}

.k-input:focus {
    border-color: var(--k-primary-300);
    box-shadow: 0 0 0 3px rgba(106, 44, 111, .12);
}

.k-input.is-error {
    border-color: var(--k-coral);
}

/* Show/hide password toggle */
.pw-wrap {
    position: relative;
}

.pw-wrap .k-input {
    padding-right: 44px;
}

.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 44px;
    width: 42px;
    display: grid;
    place-items: center;
    background: none;
    border: none;
    color: var(--k-muted);
    cursor: pointer;
    font-size: 1.05rem;
    transition: color var(--k-transition);
}

.pw-toggle:hover {
    color: var(--k-primary);
}

.btn-k {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    width: 100%;
    padding: 0 20px;
    border: none;
    border-radius: var(--k-radius-sm);
    background: var(--k-primary);
    color: #fff;
    font-family: var(--k-font);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--k-transition), box-shadow var(--k-transition);
}

.btn-k:hover {
    background: var(--k-primary-700);
    box-shadow: 0 2px 10px rgba(106, 44, 111, .15);
}

.btn-k:active {
    transform: scale(.99);
}

/* Errors & alerts */
.form-errors {
    background: #fdecea;
    border: 1px solid #ff633633;
    border-radius: var(--k-radius-sm);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: .84rem;
    color: #a3321c;
    line-height: 1.4;
}

.form-errors ul {
    margin: 0;
    padding: 0 0 0 16px;
}

.form-errors li {
    margin-bottom: 4px;
}

.form-error {
    display: block;
    font-size: .76rem;
    color: var(--k-coral);
    margin-top: 4px;
}

/* Success message */
.form-success {
    background: #e6f4ea;
    border: 1px solid #28a74533;
    border-radius: var(--k-radius-sm);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: .84rem;
    color: #1b7a3d;
}

/* Back link */
.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--k-muted);
    margin-top: 16px;
    transition: color var(--k-transition);
}

.auth-back:hover { color: var(--k-primary); }

/* Lockout */
.lockout-card {
    max-width: 480px;
    width: 100%;
    text-align: center;
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius);
    box-shadow: var(--k-shadow-lg);
    padding: 42px 38px;
}

.lockout-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ff63361a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.lockout-icon i {
    font-size: 1.5rem;
    color: var(--k-coral);
}

.lockout-card h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 10px;
}

.lockout-card p {
    font-size: .88rem;
    color: var(--k-muted);
    line-height: 1.5;
    margin: 0 0 24px;
}

/* === Auth responsive === */

@media (max-width: 720px) {
    .auth-card {
        flex-direction: column;
    }

    .auth-brand {
        flex: none;
        padding: 28px 24px;
    }

    .auth-form {
        padding: 28px 24px;
    }
}

/* ==========================================================================
   Dashboard — app shell, tables, badges, modal
   ========================================================================== */

:root {
    --k-teal-700: #14c49e;
    --k-sidebar-w: 250px;
    --k-topbar-h: 60px;
}

body.dash { background-attachment: fixed; }

.app { display: grid; grid-template-columns: var(--k-sidebar-w) 1fr; min-height: 100vh; transition: grid-template-columns var(--k-transition); }

/* Sidebar */
.sidebar { background: var(--k-primary); color: #d9bfdb; display: flex; flex-direction: column; overflow: hidden;
  position: sticky; top: 0; height: 100vh; align-self: start; }

/* Collapsed (sliding) rail — 72px, icons only */
.app.is-collapsed { grid-template-columns: 72px 1fr; }
.app.is-collapsed .brand { justify-content: center; padding: 0; }
.app.is-collapsed .brand .word,
.app.is-collapsed .brand-word { display: none; }
.app.is-collapsed .nav-label { display: none; }
.app.is-collapsed .nav-item { justify-content: center; gap: 0; padding: 11px 0; }
.app.is-collapsed .nav-section { font-size: 0; padding: 0; height: 1px; margin: 9px 16px; background: rgba(255, 255, 255, .10); }
/* Rail colapsado: solo iconos. Ocultar badge "soon", texto del usuario y chevron. */
.app.is-collapsed .nav-soon { display: none; }
.app.is-collapsed .user-id,
.app.is-collapsed .user-toggle .chev { display: none; }
.app.is-collapsed .user-toggle { justify-content: center; gap: 0; padding: 12px 0; }
.app.is-collapsed .sidebar-user .nav-item { padding: 11px 0; }
.brand { display: flex; align-items: center; gap: 10px; height: var(--k-topbar-h); padding: 0 20px; color: #fff; }
.brand .iso { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #fc7d44, #d30a69); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .95rem; flex: none; }
.brand .word { font-size: 1.05rem; font-weight: 600; letter-spacing: .2px; }
/* Logos reales (SVG) en el sidebar. El wordmark YA incluye el isotipo, así que
   expandido usamos solo el wordmark y colapsado solo el isotipo. */
.brand-iso { width: 30px; height: 30px; flex: none; display: none; }
.brand-word { height: 20px; width: auto; display: block; }
.app.is-collapsed .brand-iso { display: block; }
.nav-section { font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; color: #a77fab; padding: 18px 20px 8px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 20px; color: #d9bfdb; font-size: .9rem; cursor: pointer; border-left: 3px solid transparent; transition: background var(--k-transition), color var(--k-transition); text-decoration: none; }
.nav-item i { font-size: 1.15rem; width: 1.15rem; text-align: center; flex: none; }
.nav-item .nav-ic-svg { width: 1.2rem; height: 1.2rem; flex: none; }
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-item.active { background: rgba(255, 255, 255, .13); border-left-color: var(--k-gold); color: #fff; font-weight: 500; }
.sidebar .spacer { flex: 1; }

/* --- Navegación: ítems deshabilitados / "soon" --------------------------- */
.nav-main { display: flex; flex-direction: column; }
.nav-item.is-disabled { opacity: .45; cursor: default; pointer-events: none; }
.nav-soon { margin-left: auto; font-size: .6rem; padding: 1px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .10); text-transform: uppercase; letter-spacing: .06em; }

/* --- Menú de usuario (drop-up, pie del sidebar) -------------------------- */
/* El menú flota por ENCIMA del toggle (position:absolute), así no empuja el
   layout ni obliga a hacer scroll al abrirlo. */
.sidebar-user { border-top: 1px solid rgba(255, 255, 255, .10); position: relative; }
.user-menu-items { position: absolute; left: 0; right: 0; bottom: 100%;
  display: flex; flex-direction: column;
  background: var(--k-primary); border-top: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, .30);
  max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
  transition: max-height .22s ease, opacity .22s ease; z-index: 60; }
.sidebar-user.open .user-menu-items { max-height: 340px; opacity: 1; pointer-events: auto; }
.user-logout { margin: 0; }
.nav-item.as-button { width: 100%; text-align: left; background: none; border: 0;
  font: inherit; color: #d9bfdb; border-left: 3px solid transparent; }
.user-toggle { display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; color: #fff; padding: 12px 20px; }
.user-toggle:hover { background: rgba(255, 255, 255, .08); }
.user-toggle .avatar { flex: none; }
.user-id { flex: 1; min-width: 0; text-align: left; }
.user-name { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-sub { font-size: .68rem; color: #a77fab; text-transform: capitalize; }
.user-toggle .chev { transition: transform .22s ease; opacity: .7; }
.sidebar-user.open .user-toggle .chev { transform: rotate(180deg); }

/* --- Breadcrumbs (topbar) ------------------------------------------------ */
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: .95rem; }
.breadcrumb a { color: inherit; opacity: .55; text-decoration: none; }
.breadcrumb a:hover { opacity: 1; }
.breadcrumb .cur { font-weight: 600; }
.breadcrumb .sep { opacity: .35; }

/* Topbar */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { height: var(--k-topbar-h); background: var(--k-surface); border-bottom: 1px solid var(--k-border); display: flex; align-items: center; gap: 14px; padding: 0 28px; position: sticky; top: 0; z-index: 20; }
.topbar .title { font-size: 1.05rem; font-weight: 500; }
.topbar .grow { flex: 1; }
.icon-btn { width: 38px; height: 38px; border-radius: 9px; border: none; background: transparent; color: var(--k-muted); display: grid; place-items: center; cursor: pointer; font-size: 1.2rem; transition: background var(--k-transition), color var(--k-transition); }
.icon-btn:hover { background: var(--k-primary-050); color: var(--k-primary); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--k-primary); color: #fff; font-weight: 600; font-size: .8rem; display: grid; place-items: center; }
.who { font-size: .84rem; line-height: 1.2; }
.who .lic { font-size: .7rem; color: var(--k-muted); }

/* Content */
.content { padding: 24px 28px; }
.page-head { display: flex; align-items: flex-start; margin-bottom: 18px; gap: 14px; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; color: var(--k-primary); margin: 0; }
.page-head .sub { font-size: .82rem; color: var(--k-muted); margin: 3px 0 0; max-width: 620px; line-height: 1.5; }
.page-head .grow { flex: 1; }

/* Buttons (dashboard variants; base .btn-k defined in auth) */
.btn-k.btn-inline { display: inline-flex; align-items: center; gap: 7px; height: 40px; width: auto; padding: 0 16px; font-size: .9rem; white-space: nowrap; }
/* Outline & ghost share the same shape as .btn-k (radius, height, padding) */
.btn-k-outline, .btn-k-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
    height: 40px; padding: 0 16px; border-radius: var(--k-radius-sm);
    font-family: var(--k-font); font-weight: 600; font-size: .9rem; border: 1px solid transparent;
    white-space: nowrap; transition: background var(--k-transition), color var(--k-transition), box-shadow var(--k-transition);
}
.btn-k-outline { background: #fff; color: var(--k-primary); border-color: var(--k-border); }
.btn-k-outline:hover { background: var(--k-primary-050); color: var(--k-primary); box-shadow: none; }
.btn-k-ghost { background: transparent; color: var(--k-muted); }
.btn-k-ghost:hover { background: var(--k-primary-050); color: var(--k-primary); box-shadow: none; }
.btn-sm { height: 32px; padding: 0 12px; font-size: .82rem; }

/* Stat strip */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card { border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); background: var(--k-surface); padding: 14px 16px; box-shadow: var(--k-shadow); }
.stat-card .label { font-size: .76rem; color: var(--k-muted); display: flex; align-items: center; gap: 7px; }
.stat-card .label i { font-size: .95rem; }
.stat-card .value { font-size: 1.5rem; font-weight: 600; line-height: 1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.stat-card .value small { font-size: .8rem; color: var(--k-muted); font-weight: 400; }

/* Card */
.k-card { background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius); box-shadow: var(--k-shadow); overflow: hidden; }
.k-card + .k-card { margin-top: 16px; }
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--k-border); display: flex; align-items: center; gap: 10px; }
.card-head h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.card-head .grow { flex: 1; }
.card-head .chint { font-size: .76rem; color: var(--k-muted); font-weight: 400; margin-top: 2px; }

/* Tabs */
.k-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--k-border); padding: 0 8px; }
.k-tab { display: flex; align-items: center; gap: 8px; padding: 13px 16px; font-size: .88rem; color: var(--k-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--k-transition); }
.k-tab i { font-size: 1rem; }
.k-tab:hover { color: var(--k-primary); }
.k-tab.active { color: var(--k-primary); border-bottom-color: var(--k-primary); font-weight: 600; }
.k-tab .cnt { font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--k-primary-050); color: var(--k-primary-700); }
.k-tab.active .cnt { background: var(--k-primary); color: #fff; }

/* Table */
.k-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.k-table th { text-align: left; background: #faf7fb; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--k-muted); font-weight: 500; padding: 11px 16px; border-bottom: 1px solid var(--k-border); }
.k-table td { padding: 12px 16px; border-bottom: 1px solid var(--k-border); font-size: .88rem; }
.k-table tbody tr:hover { background: #faf7fb; }
.k-table tbody tr:last-child td { border-bottom: none; }
/* Every column except the first is centered */
.k-table th:not(:first-child), .k-table td:not(:first-child) { text-align: center; }
.k-table td:not(:first-child) .row-acts { justify-content: center; }
.mono { font-family: var(--k-font-mono); font-variant-numeric: tabular-nums; }
.host { font-weight: 600; }
.dim { color: var(--k-muted); }
.empty-row td { text-align: center; color: var(--k-muted); font-size: .84rem; padding: 34px 16px; }
.empty-row i { font-size: 1.5rem; display: block; margin-bottom: 8px; opacity: .5; }

/* Badges */
.k-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.k-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.b-online { color: var(--k-teal-700); background: #44dec61f; }
.b-online::before { animation: k-heartbeat 1.6s ease-out infinite; }
.b-offline { color: var(--k-muted); background: #8a7d8c19; }
.b-conn { color: #1b7a3d; background: #e6f4ea; }
.b-disc { color: var(--k-muted); background: #8a7d8c19; }
.b-revoked { color: var(--k-coral); background: #ff633619; }
.b-active { color: #1b7a3d; background: #e6f4ea; }
.b-pending { color: #8a5a0b; background: #ffb83326; }
.b-pending::before { animation: none; }
.b-disabled { color: var(--k-coral); background: #ff633619; }
@keyframes k-heartbeat { 0% { box-shadow: 0 0 0 0 #14c49e66; } 70% { box-shadow: 0 0 0 6px #14c49e00; } 100% { box-shadow: 0 0 0 0 #14c49e00; } }

.mode-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; font-size: .72rem; font-weight: 600; }
.m-audit { color: #1f5fa5; background: #eaf1fb; }
.m-pentest { color: #b5391b; background: #fbebe7; }
.mode-badge.clickable { cursor: pointer; border: 1px solid transparent; transition: box-shadow var(--k-transition); }
.mode-badge.clickable:hover { box-shadow: 0 0 0 2px currentColor inset; }

/* Mode picker modal options */
.mode-opt { display: flex; align-items: flex-start; gap: 12px; text-align: left; border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); padding: 12px 14px; cursor: pointer; transition: var(--k-transition); margin-bottom: 10px; }
.mode-opt:hover:not(.disabled):not(.current) { border-color: var(--k-primary-300); background: var(--k-primary-050); }
.mode-opt.current { border-color: var(--k-primary); background: var(--k-primary-050); box-shadow: 0 0 0 2px var(--k-primary-300) inset; }
.mode-opt.disabled { opacity: .5; cursor: not-allowed; }
.mode-opt .mo-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 1rem; }
.mode-opt .mo-h { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.mode-opt .mo-d { font-size: .76rem; color: var(--k-muted); margin-top: 3px; line-height: 1.4; }
.mo-badge { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 6px; }

.type-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 8px; }
.t-agent { color: var(--k-primary-700); background: var(--k-primary-050); }
.t-extension { color: var(--k-info); background: #7944de14; }

.client-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.client-tag .ci { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: var(--k-primary-050); color: var(--k-primary); flex: none; }
.auth-pill { font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; }
.ap-oauth { color: #1b7a3d; background: #e6f4ea; }
.ap-token { color: #8a5a0b; background: #fff3e0; }

/* Row actions */
.row-acts { display: flex; gap: 5px; }
.act { width: 28px; height: 28px; border-radius: 7px; border: none; display: grid; place-items: center; cursor: pointer; background: #f4f1f5; color: #9b8e9d; font-size: .92rem; transition: filter var(--k-transition), background var(--k-transition), color var(--k-transition); }
.act:hover { filter: brightness(.96); }
.act-danger:hover { background: #fbebe7; color: #b5391b; }
.act-run:hover { background: #e1f5ee; color: #0f6e56; }

/* Endpoint URL block */
.endpoint { display: flex; align-items: center; gap: 10px; background: var(--k-bg); border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); padding: 12px 14px; }
.endpoint code { flex: 1; font-family: var(--k-font-mono); font-size: .9rem; color: var(--k-text); word-break: break-all; }
.conn-help { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.conn-help .opt { border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); padding: 13px 15px; }
.conn-help .opt h4 { margin: 0 0 4px; font-size: .86rem; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.conn-help .opt h4 .auth-pill { margin-left: auto; }
.conn-help .opt p { margin: 0; font-size: .76rem; color: var(--k-muted); line-height: 1.45; }

/* Modal — canonical Karasena component (theme.css §modal) */
.modal-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(58, 45, 60, .45); display: flex; align-items: center; justify-content: center; padding: 20px; animation: modal-fade .18s ease; }
.modal-backdrop[hidden] { display: none; }
.modal-card { width: 400px; max-width: 100%; background: var(--k-surface); border-radius: var(--k-radius); box-shadow: var(--k-shadow-lg); padding: 26px 26px 20px; text-align: center; animation: modal-pop .2s cubic-bezier(.4, 0, .2, 1); }
.modal-card.is-form { width: 460px; }
.modal-icon { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-size: 1.5rem; background: #ff63361a; color: var(--k-coral); }
.modal-icon.is-brand { background: var(--k-primary-050); color: var(--k-primary); }
.modal-icon.is-warn { background: #ffb8331f; color: #b7860b; }
.modal-title { font-size: 1.1rem; font-weight: 600; color: var(--k-text); margin: 0 0 6px; }
.modal-text { font-size: .9rem; color: var(--k-muted); line-height: 1.5; margin: 0 0 22px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.modal-actions .btn-k, .modal-actions .btn-k-outline { width: auto; height: 40px; min-width: 110px; justify-content: center; }
.btn-k.btn-danger { background: var(--k-coral); }
.btn-k.btn-danger:hover { background: #e0431c; }
/* Form variant: fields left-aligned inside the centered card */
.modal-form { text-align: left; margin: 0 0 22px; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.field-label { font-size: .78rem; font-weight: 500; color: var(--k-muted); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .03em; }

.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-card { border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); padding: 15px 12px; text-align: center; cursor: pointer; transition: var(--k-transition); background: var(--k-surface); }
.type-card:hover { border-color: var(--k-primary-300); background: var(--k-primary-050); }
.type-card.sel { border-color: var(--k-primary); background: var(--k-primary-050); box-shadow: 0 0 0 2px var(--k-primary-300) inset; }
.type-card .ti { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px; background: #fff; border: 1px solid var(--k-border); color: var(--k-primary); font-size: 1.1rem; }
.type-card.sel .ti { background: var(--k-primary); color: #fff; border-color: var(--k-primary); }
.type-card .tn { font-size: .86rem; font-weight: 600; }
.type-card .td { font-size: .7rem; color: var(--k-muted); margin-top: 2px; line-height: 1.3; }

.k-alert { border-radius: var(--k-radius-sm); padding: 11px 14px; font-size: .8rem; line-height: 1.45; display: flex; gap: 9px; align-items: flex-start; }
.k-alert i { font-size: 1.05rem; flex: none; margin-top: 1px; }
.k-alert.warn { background: #ffb8330f; border: 1px solid #ffb83355; color: #8a5a0b; }
.k-alert.info { background: #7944de0f; border: 1px solid #7944de33; color: var(--k-info); }

.key-reveal { display: flex; align-items: center; gap: 8px; background: #2a1f2c; border-radius: var(--k-radius-sm); padding: 12px 14px; }
.key-reveal code { flex: 1; font-family: var(--k-font-mono); font-size: .82rem; color: #f6e9f7; word-break: break-all; }
.copy-btn { flex: none; background: rgba(255, 255, 255, .12); color: #fff; border: none; border-radius: 7px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; font-size: 1rem; transition: background var(--k-transition); }
.copy-btn:hover { background: rgba(255, 255, 255, .22); }

.dhint { font-size: .74rem; color: var(--k-muted); margin-top: 7px; }

/* Toasts */
.toast-stack { position: fixed; top: 18px; right: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--k-surface); border-radius: var(--k-radius-sm); border-left: 4px solid var(--k-success); box-shadow: var(--k-shadow-lg); padding: 12px 14px; font-size: .88rem; min-width: 280px; max-width: 380px; animation: toast-in .26s cubic-bezier(.4, 0, .2, 1); }
.toast > i { font-size: 1.15rem; color: var(--k-success); flex: none; }
.toast .toast-msg { flex: 1; color: var(--k-text); line-height: 1.35; }
.toast.toast-error { border-left-color: var(--k-coral); }
.toast.toast-error > i { color: var(--k-coral); }
.toast.toast-warning { border-left-color: var(--k-gold); }
.toast.toast-warning > i { color: var(--k-gold); }
.toast.toast-info { border-left-color: var(--k-info); }
.toast.toast-info > i { color: var(--k-info); }
.toast-x { background: none; border: 0; cursor: pointer; flex: none; width: 24px; height: 24px;
  border-radius: 6px; display: grid; place-items: center; color: var(--k-muted); padding: 0; }
.toast-x:hover { background: var(--k-primary-050); color: var(--k-text); }
.toast-x i { font-size: .78rem; color: inherit; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }

.tab-panel[hidden] { display: none; }

/* ==========================================================================
   Tasks table
   ========================================================================== */

/* ==========================================================================
   Shared components from Karasena ASM styleguide (theme.css)
   ========================================================================== */

/* k-badge variants (§6.7) */
.k-badge.is-success { color: #1b7a3d; background: #e6f4ea; }
.k-badge.is-progress { color: #1f5fa5; background: #eaf1fb; }
.k-badge.is-running { color: var(--k-info); background: #7944de19; }
.k-badge.is-queued { color: var(--k-gold); background: #ffb83322; }
.k-badge.is-failed { color: var(--k-coral); background: #ff633619; }
.k-badge.is-muted { color: var(--k-muted); background: #8a7d8c19; }

/* Mini-badge (§6.10) */
.mini-badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.mb-ok { background: #e1f5ee; color: #0f6e56; }
.mb-warn { background: #faeeda; color: #854f0b; }
.mb-danger { background: #fbebe7; color: #b5391b; }

/* k-stage (§6.15) */
.k-stage { font-size: .72rem; padding: 4px 9px; border-radius: 8px; display: inline-flex; gap: 5px; align-items: center; background: #8a7d8c12; color: var(--k-muted); font-family: var(--k-font-mono); font-weight: 600; white-space: nowrap; }
.k-stage.done { background: #28a74514; color: var(--k-success); }
.k-stage.running { background: #7944de14; color: var(--k-info); }
.k-stage.failed { background: #ff633614; color: var(--k-coral); }

/* Script type colors (TIPOS_VALIDOS from server/config.py) */
.k-stage.st-python { background: #1d4ed814; color: #1d4ed8; }
.k-stage.st-powershell { background: #9333ea14; color: #9333ea; }
.k-stage.st-javascript, .k-stage.st-javascript_cdp, .k-stage.st-javascript_node { background: #ca8a0414; color: #ca8a04; }
.k-stage.st-background { background: #0e749914; color: #0e7499; }
.k-stage.st-fileserver { background: #15803d14; color: #15803d; }
.k-stage.st-download { background: #0d948814; color: #0d9488; }
.k-stage.st-stop, .k-stage.st-kill_agent { background: #b91c1c14; color: #b91c1c; }
.k-stage.st-restart_agent { background: #c2410c14; color: #c2410c; }
.k-stage.st-list_background { background: #6b728014; color: #6b7280; }

/* Filter bar (§6.11 table toolbar) */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.k-card > .filter-bar { padding: 12px 16px; border-bottom: 1px solid var(--k-border); }
.filter-bar select { height: 40px; padding: 0 30px 0 12px; font-size: .86rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a7d8c'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); background-color: var(--k-surface); color: var(--k-text); font-family: var(--k-font); transition: border-color var(--k-transition); }
.filter-bar select:focus { border-color: var(--k-primary-300); box-shadow: 0 0 0 3px rgba(106, 44, 111, .12); outline: none; }

/* ==========================================================================
   Tasks table
   ========================================================================== */

/* Table cells */
.tk-table .text-center { text-align: center; }
.tk-agent { font-weight: 500; white-space: nowrap; }
.tk-agent small { color: var(--k-muted); font-weight: 400; font-size: .78rem; }
.tk-dur { font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--k-muted); }
.tk-when { font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--k-muted); }

/* Clickable row */
.tk-row { cursor: pointer; transition: background var(--k-transition); }
.tk-row:hover { background: #faf7fb; }
.tk-row.is-open { background: var(--k-primary-050); }

/* Detail row (hidden by default) */
.tk-detail { background: #faf7fb; }
.tk-detail[hidden] { display: none; }
.tk-detail > td { padding: 0 16px 16px; border-bottom: 1px solid var(--k-border); }

.tk-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tk-block { min-width: 0; }
.tk-block-head { font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--k-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.tk-block-head i { font-size: .92rem; }

/* Console blocks */
.tk-pre { margin: 0; padding: 10px 12px; border-radius: 6px; font-family: var(--k-font-mono); font-size: .78rem; line-height: 1.45; white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow-y: auto; }
.tk-pre-input { background: var(--k-surface); border: 1px solid var(--k-border); color: var(--k-text); }
.tk-pre-output { background: #2a1f2c; color: #f6e9f7; }
.tk-pre-stderr { background: #2c1f1f; color: #fde9e9; margin-top: 6px; }

.tk-note { font-size: .76rem; color: var(--k-muted); margin-top: 6px; font-style: italic; }

.tk-meta { display: flex; align-items: center; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--k-border); font-size: .8rem; color: var(--k-muted); flex-wrap: wrap; }
.tk-meta i { font-size: .88rem; margin-right: 3px; }

@media (max-width: 992px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .conn-help { grid-template-columns: 1fr; }
    .tl-track { padding-left: 34px; }
    .tl-track::before { left: 24px; }
    .tl-dot { left: -16px; }
}

/* --- Account / Team (dashboard) ------------------------------------------- */
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .acct-grid { grid-template-columns: 1fr; } }
.k-def { padding: 8px 20px 16px; }
.k-def > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--k-border, #efeaf0); }
.k-def > div:last-child { border-bottom: 0; }
.k-def span { color: #9b8e9d; font-size: .85rem; }
.k-def strong { font-weight: 600; font-size: .9rem; text-align: right; word-break: break-word; }
.msg-stack { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.k-alert.is-error { background: #e0564a12; border: 1px solid #e0564a44; color: #b5391b; }
.k-alert.is-ok { background: #1fa07812; border: 1px solid #1fa07844; color: #0f6e56; }
.inline-form { display: inline; margin: 0; }

/* --- Account / Team: meters, invite bar, pill (mockup aprobado) ----------- */
.card-body { padding: 16px 20px; }
.avatar-lg { width: 44px; height: 44px; font-size: 1rem; }
.k-meter { margin: 12px 0; }
.k-meter:first-child { margin-top: 0; }
.k-meter .mt { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 5px; }
.k-meter .mt .n { color: var(--k-muted); }
.k-meter .bar { height: 6px; border-radius: 999px; background: var(--k-primary-050, #efeaf0); overflow: hidden; }
.k-meter .bar > i { display: block; height: 100%; border-radius: 999px; background: var(--k-primary); }
.pwgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .pwgrid { grid-template-columns: 1fr; } }
.invite-bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--k-border);
  border-radius: var(--k-radius); background: var(--k-surface); box-shadow: var(--k-shadow); }
.invite-bar .form-group { margin: 0; }
.usage-pill { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem;
  color: var(--k-muted); background: var(--k-primary-050, #efeaf0); padding: 6px 12px; border-radius: 999px; }

/* --- Cards de account/team limpias y ALINEADAS (mockup) ------------------- */
.acct-grid { align-items: stretch; }                       /* columnas a la misma altura */
.acct-grid .k-card, .acct-col .k-card { margin-top: 0; }  /* anula .k-card + .k-card dentro del grid */
.acct-col { display: flex; flex-direction: column; gap: 18px; }
.acct-col > .k-card:last-child { flex: 1; }                /* la última card rellena → bottoms alineados */
.form-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.card-title { margin: 0 0 14px; font-size: 1rem; font-weight: 600; color: var(--k-ink, #2c2430); }
.card-pad { padding: 16px 20px; }

/* --- Account: revelar contraseña (ojo) ----------------------------------- */
.pw-field { position: relative; }
.pw-field .k-input { padding-right: 42px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: var(--k-muted);
  width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; }
.pw-eye:hover { color: var(--k-primary); background: var(--k-primary-050); }
.pw-eye i { font-size: 1rem; }

/* --- Team: botón invite a la altura de los inputs (36px) ------------------ */
.invite-btn { display: inline-flex; align-items: center; gap: 7px; height: 44px;
  width: auto; padding: 0 18px; font-size: .88rem; white-space: nowrap; }

/* --- Team: toolbar (búsqueda + filtros) y contador ----------------------- */
.k-card > .filter-bar { padding: 12px 16px; border-bottom: 1px solid var(--k-border); }
.k-search { position: relative; display: flex; align-items: center; min-width: 220px; flex: 1; max-width: 340px; }
.k-search i { position: absolute; left: 12px; color: var(--k-muted); font-size: .92rem; pointer-events: none; }
.k-search input { width: 100%; height: 40px; padding: 0 12px 0 34px; font-size: .86rem;
  border: 1px solid var(--k-border); border-radius: var(--k-radius-sm);
  background: var(--k-surface); color: var(--k-text); transition: border-color var(--k-transition); }
.k-search input:focus { border-color: var(--k-primary-300); box-shadow: 0 0 0 3px rgba(106, 44, 111, .12); outline: none; }
.filter-bar .grow { flex: 1; }
.k-count { font-size: .8rem; color: var(--k-muted); white-space: nowrap; }

/* --- Invitación: reveal del token ---------------------------------------- */
.token-reveal { display: flex; align-items: center; gap: 10px;
  background: var(--k-bg, #f6f1f7); border: 1px solid var(--k-border);
  border-radius: var(--k-radius-sm); padding: 10px 12px; }
.token-reveal code { flex: 1; min-width: 0; font-family: var(--k-font-mono, monospace);
  font-size: .82rem; color: var(--k-text); word-break: break-all; line-height: 1.4; }
.token-reveal .btn-sm { flex: none; }

/* --- Team: paginación (§6.23) -------------------------------------------- */
.k-pagination { display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  background: #fcfafd; border-top: 1px solid var(--k-border); }
.k-pagination .grow { flex: 1; }
.pg-info { font-size: .8rem; color: var(--k-muted); }
.pg-btns { display: flex; gap: 5px; }
.pg-btn { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--k-border);
  display: grid; place-items: center; color: var(--k-text); text-decoration: none;
  background: var(--k-surface); font-size: .8rem; transition: background var(--k-transition), border-color var(--k-transition); }
.pg-btn:hover { background: var(--k-primary-050); border-color: var(--k-primary-300); }
.pg-btn.is-disabled { opacity: .4; pointer-events: none; }