/* /Components/Pages/AdminBilling.razor.rz.scp.css */
/* Fase SaaS Slice 3 — banner "Sube de plan" con caps + usage. CSS isolation: solo aplica
   a AdminBilling.razor. Brand kit konecia (tokens kc-*). */

.plan-limits-card[b-3ng1lq4zsc] {
    padding: 18px 20px;
    margin-bottom: 18px;
    background: linear-gradient(180deg, var(--kc-bg-elevated) 0%, var(--kc-color-paper) 100%);
    border: 1px solid var(--kc-border);
    border-radius: 14px;
}

.plan-limits-header[b-3ng1lq4zsc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}

.plan-limits-grid[b-3ng1lq4zsc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.plan-limit[b-3ng1lq4zsc] {
    background: var(--kc-color-paper);
    border: 1px solid var(--kc-border);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 160ms ease;
}

.plan-limit.is-reached[b-3ng1lq4zsc] {
    border-color: var(--kc-color-danger, #DC2626);
    background: rgba(220, 38, 38, 0.04);
}

.plan-limit-row[b-3ng1lq4zsc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.plan-limit-label[b-3ng1lq4zsc] {
    font-family: var(--kc-font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kc-color-neutral);
    font-weight: 500;
}

.plan-limit-count[b-3ng1lq4zsc] {
    font-family: var(--kc-font-sans, system-ui);
    font-size: 16px;
    font-weight: 600;
    color: var(--kc-fg);
}

.plan-limit-count .muted[b-3ng1lq4zsc] {
    color: var(--kc-color-neutral);
    font-weight: 400;
    font-size: 12px;
    margin: 0 2px;
}

.plan-limit-bar[b-3ng1lq4zsc] {
    height: 5px;
    border-radius: 999px;
    background: var(--kc-bg-elevated);
    overflow: hidden;
    border: 1px solid var(--kc-border);
}

.plan-limit-fill[b-3ng1lq4zsc] {
    height: 100%;
    background: linear-gradient(90deg, var(--kc-color-emerald, #10B981) 0%, var(--kc-color-lime, #C6F24B) 100%);
    transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.plan-limit.is-reached .plan-limit-fill[b-3ng1lq4zsc] {
    background: var(--kc-color-danger, #DC2626);
}
/* /Components/Pages/AiAgents.razor.rz.scp.css */
/* AiAgents.razor — complements global page-header / kpi-grid / card / kc-pill tokens.
   The page reuses the consolidated visual language; this file only adds BYOK card
   layout + ComboBox row styling. */

.kc-byok-card[b-zhfmzdhmth] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px 24px;
    margin-bottom: 16px;
    border-left: 4px solid var(--kc-color-emerald, #10B981);
}
.kc-byok-card-meta[b-zhfmzdhmth] { min-width: 0; }
.kc-byok-card-eyebrow[b-zhfmzdhmth] {
    font-family: var(--kc-font-mono, ui-monospace);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kc-fg-muted, #64748b);
    margin-bottom: 6px;
}
.kc-byok-card-title[b-zhfmzdhmth] {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.kc-byok-state[b-zhfmzdhmth] { display: inline-flex; align-items: center; gap: 7px; }
.kc-byok-state--platform[b-zhfmzdhmth] { color: var(--kc-color-emerald, #10B981); }
.kc-byok-state--own[b-zhfmzdhmth] { color: #B45309; }
.kc-byok-preview[b-zhfmzdhmth] {
    font-family: var(--kc-font-mono);
    font-size: 12.5px;
    color: var(--kc-fg-muted);
    background: var(--kc-color-paper, #FAF8F2);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--kc-border);
}
.kc-byok-card-lead[b-zhfmzdhmth] {
    margin: 0;
    font-size: 13px;
    color: var(--kc-fg-muted);
    line-height: 1.55;
}
.kc-byok-card-actions[b-zhfmzdhmth] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Steps list inside the BYOK popup */
.kc-byok-steps[b-zhfmzdhmth] {
    margin: 8px 0 14px;
    padding-left: 22px;
    font-size: 13.5px;
    color: var(--kc-fg);
    line-height: 1.7;
}
.kc-byok-steps li[b-zhfmzdhmth] { margin: 2px 0; }
.kc-byok-steps a[b-zhfmzdhmth] {
    color: var(--kc-color-emerald, #10B981);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}
.kc-byok-steps a:hover[b-zhfmzdhmth] { text-decoration: underline; }

/* Compact row inside the model DxComboBox dropdown */
.kc-model-combo-row[b-zhfmzdhmth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 2px 0;
}
.kc-model-combo-name[b-zhfmzdhmth] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kc-fg, #0E1414);
}
.kc-model-combo-code[b-zhfmzdhmth] {
    font-family: var(--kc-font-mono);
    font-size: 11px;
    color: var(--kc-fg-muted);
}
.kc-model-combo-price[b-zhfmzdhmth] {
    font-family: var(--kc-font-mono);
    font-size: 11px;
    color: var(--kc-color-emerald, #10B981);
    background: color-mix(in srgb, var(--kc-color-emerald, #10B981) 8%, transparent);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.empty-state[b-zhfmzdhmth] {
    text-align: center;
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.empty-state h3[b-zhfmzdhmth] { margin: 0; font-size: 18px; }

/* ── Editor del agente (drawer rich con secciones) ─────────────────────── */
.kc-editor-section[b-zhfmzdhmth] {
    padding: 14px 0;
    border-top: 1px dashed var(--kc-border, #e5e7eb);
}
.kc-editor-section:first-of-type[b-zhfmzdhmth] { border-top: 0; padding-top: 6px; }
.kc-editor-section-title[b-zhfmzdhmth] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-fg, #1f2937);
    margin: 0 0 10px;
}

/* Canales — chips checkeables */
.kc-channel-checks[b-zhfmzdhmth] {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.kc-channel-check[b-zhfmzdhmth] {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 999px;
    background: var(--kc-color-paper, white);
    cursor: pointer; font-size: 12.5px;
    transition: all 0.15s ease;
}
.kc-channel-check input[b-zhfmzdhmth] { margin: 0; cursor: pointer; }
.kc-channel-check.is-on[b-zhfmzdhmth] {
    background: rgba(16, 185, 129, 0.08);
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
    font-weight: 600;
}
.kc-channel-check:hover[b-zhfmzdhmth] { border-color: var(--kc-color-emerald, #10B981); }

/* Schedule — días + toggle */
.kc-toggle-row[b-zhfmzdhmth] {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 10px; cursor: pointer; font-size: 13px;
}
.kc-toggle-row input[b-zhfmzdhmth] { cursor: pointer; }
.kc-day-checks[b-zhfmzdhmth] {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.kc-day-check[b-zhfmzdhmth] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 8px;
    background: var(--kc-color-paper, white);
    cursor: pointer; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.kc-day-check input[b-zhfmzdhmth] { display: none; }
.kc-day-check.is-on[b-zhfmzdhmth] {
    background: var(--kc-color-emerald, #10B981);
    border-color: var(--kc-color-emerald, #10B981);
    color: white;
}

/* ── Prompt editor (Memo + meta strip) ─────────────────────────────────── */
.kc-prompt-input :deep(textarea)[b-zhfmzdhmth] {
    font-family: var(--kc-font-mono, ui-monospace);
    font-size: 12.5px;
    line-height: 1.55;
}
.kc-prompt-meta[b-zhfmzdhmth] {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 6px;
    font-size: 11px;
    color: var(--kc-fg-muted, #64748b);
}
.kc-prompt-count[b-zhfmzdhmth] {
    font-family: var(--kc-font-mono, ui-monospace);
}

/* ── Playground ─────────────────────────────────────────────────────────── */
.kc-pg-meta[b-zhfmzdhmth] {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 0 0 14px;
}
.kc-pg-meta-chip[b-zhfmzdhmth] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    background: var(--kc-color-bone-2, #fafaf7);
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 999px;
    font-size: 11.5px;
    font-family: var(--kc-font-mono, ui-monospace);
    color: var(--kc-fg-muted, #64748b);
}
.kc-pg-section[b-zhfmzdhmth] { margin-bottom: 14px; }
.kc-pg-label[b-zhfmzdhmth] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kc-fg, #1f2937);
    margin-bottom: 6px;
}
.kc-pg-input :deep(textarea)[b-zhfmzdhmth] { font-family: var(--kc-font-sans); font-size: 13.5px; }

.kc-pg-output-header[b-zhfmzdhmth] {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--kc-fg-muted); margin-bottom: 8px;
}
.kc-pg-output[b-zhfmzdhmth] {
    background: rgba(16, 185, 129, 0.04);
    border-left: 3px solid var(--kc-color-emerald, #10B981);
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 14px; line-height: 1.55;
    white-space: pre-wrap; word-break: break-word;
    color: var(--kc-fg, #1f2937);
}
.kc-pg-stats[b-zhfmzdhmth] {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 10px;
    font-family: var(--kc-font-mono, ui-monospace);
    font-size: 11.5px;
    color: var(--kc-fg-muted, #64748b);
}
.kc-pg-stats span[b-zhfmzdhmth] { display: inline-flex; align-items: center; gap: 5px; }

/* Compare mode (A vs B side-by-side) */
.kc-pg-toggle[b-zhfmzdhmth] {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto;
    padding: 3px 10px;
    background: var(--kc-color-paper, white);
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    color: var(--kc-fg, #1f2937);
}
.kc-pg-toggle input[b-zhfmzdhmth] { margin: 0; cursor: pointer; }

.kc-pg-compare-grid[b-zhfmzdhmth] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 10px;
}
.kc-pg-compare-col[b-zhfmzdhmth] {
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 10px;
    padding: 12px;
    background: var(--kc-color-bone-2, #fafaf7);
}
.kc-pg-variant-badge[b-zhfmzdhmth] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    font-size: 10px; font-weight: 700;
    color: white;
    margin-right: 6px;
}
.kc-pg-variant-badge.variant-a[b-zhfmzdhmth] { background: var(--kc-color-emerald, #10B981); }
.kc-pg-variant-badge.variant-b[b-zhfmzdhmth] { background: var(--kc-color-ai-suggested); }

@media (max-width: 880px) {
    .kc-pg-compare-grid[b-zhfmzdhmth] { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 720px) {
    .kc-byok-card[b-zhfmzdhmth] { grid-template-columns: 1fr; }
    .kc-byok-card-actions[b-zhfmzdhmth] { justify-content: flex-start; flex-wrap: wrap; }
}

/* ── Curated model picker — featured star ─────────────────────────────── */
.kc-model-featured-badge[b-zhfmzdhmth] {
    margin-left: 6px;
    color: var(--kc-color-emerald, #10B981);
    font-size: 11px;
}

/* ── Escalation rule builder (no raw JSON) ────────────────────────────── */
.kc-esc-rule[b-zhfmzdhmth] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 10px;
    background: var(--kc-color-paper, #fff);
}
.kc-esc-rule .kc-esc-when[b-zhfmzdhmth],
.kc-esc-rule .kc-esc-andor[b-zhfmzdhmth] {
    font-size: 12.5px;
    color: var(--kc-fg-muted, #6b7280);
    white-space: nowrap;
}
.kc-esc-rule .kc-esc-arrow[b-zhfmzdhmth] {
    color: var(--kc-color-emerald, #10B981);
    padding: 0 2px;
}
.kc-esc-select[b-zhfmzdhmth] { min-width: 150px; flex: 1 1 150px; }
.kc-esc-target[b-zhfmzdhmth] { flex: 1 1 180px; min-width: 170px; }
.kc-esc-remove[b-zhfmzdhmth] { color: var(--kc-color-danger, #dc2626); }
.kc-esc-add[b-zhfmzdhmth] { margin-top: 2px; }
/* /Components/Pages/AiCosts.razor.rz.scp.css */
.kc-aicosts-toolbar[b-9bsohypqst] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.kc-aicosts-period[b-9bsohypqst] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kc-aicosts-period label[b-9bsohypqst] {
    font-family: var(--kc-font-mono, ui-monospace), monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kc-fg-muted, var(--text-secondary));
}

.kc-aicosts-presets[b-9bsohypqst] {
    display: inline-flex;
    gap: 4px;
    margin-left: 4px;
}

.kc-aicosts-presets .link-btn[b-9bsohypqst] {
    background: transparent;
    border: 1px solid var(--kc-border, var(--border));
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--kc-fg-muted, var(--text-secondary));
}

.kc-aicosts-presets .link-btn:hover[b-9bsohypqst] {
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
}

.kpi-cost .kpi-value[b-9bsohypqst] {
    font-family: var(--kc-font-mono, ui-monospace), monospace;
}

.kc-aicosts-balances[b-9bsohypqst] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.kc-aicosts-balance-card[b-9bsohypqst] {
    border: 1px solid var(--kc-border, var(--border));
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--kc-color-bone-2, var(--bg-card));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kc-aicosts-balance-card.low[b-9bsohypqst] {
    border-color: var(--kc-color-amber, #F59E0B);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.10);
}

.kc-aicosts-balance-provider[b-9bsohypqst] {
    font-family: var(--kc-font-mono, ui-monospace), monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kc-fg-muted, var(--text-secondary));
    margin-bottom: 8px;
}

.kc-aicosts-balance-amount[b-9bsohypqst] {
    font-family: var(--kc-font-mono, ui-monospace), monospace;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--kc-fg, var(--text-primary));
}

.kc-aicosts-balance-foot[b-9bsohypqst] {
    font-size: 11px;
    font-family: var(--kc-font-mono, ui-monospace), monospace;
    color: var(--kc-fg-muted, var(--text-secondary));
    margin-top: 4px;
}

.kc-aicosts-balance-state[b-9bsohypqst] {
    font-size: 11px;
    margin-top: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
}

.kc-aicosts-balance-state.muted[b-9bsohypqst] { color: var(--kc-fg-muted, var(--text-secondary)); background: transparent; }
.kc-aicosts-balance-state.error[b-9bsohypqst] { color: #B91C1C; background: rgba(185, 28, 28, 0.10); }
.kc-aicosts-balance-state.warn[b-9bsohypqst] { color: #92400E; background: rgba(245, 158, 11, 0.15); font-weight: 600; }
/* /Components/Pages/Analytics.razor.rz.scp.css */
/* Analytics.razor — funnel + AI impact + chart + channel breakdown.
   Reuses page-header / kpi-grid / card globals; only adds the funnel + AI impact bits. */

.kc-analytics-row[b-z3s1mofaws] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
    margin: 0 0 18px;
}

/* ── Horizontal funnel bars ──────────────────────────────────────────────── */
.kc-funnel[b-z3s1mofaws] { display: flex; flex-direction: column; gap: 10px; }
.kc-funnel-row[b-z3s1mofaws] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 14px;
    align-items: center;
}
.kc-funnel-label[b-z3s1mofaws] {
    font-family: var(--kc-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kc-fg-muted);
}
.kc-funnel-bar-track[b-z3s1mofaws] {
    height: 32px;
    background: var(--kc-color-paper, #FAF8F2);
    border-radius: 8px;
    overflow: hidden;
}
.kc-funnel-bar[b-z3s1mofaws] {
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    color: white;
    font-family: var(--kc-font-mono);
    font-size: 12.5px;
    font-weight: 700;
    transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kc-funnel-bar--1[b-z3s1mofaws] { background: linear-gradient(90deg, #0891B2, #06B6D4); }
.kc-funnel-bar--2[b-z3s1mofaws] { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
.kc-funnel-bar--3[b-z3s1mofaws] { background: linear-gradient(90deg, #D97706, #F59E0B); }
.kc-funnel-bar--4[b-z3s1mofaws] { background: linear-gradient(90deg, var(--kc-color-emerald, #10B981), var(--kc-color-lime, #C6F24B)); color: var(--kc-color-ink, #0F2419); }

/* ── AI impact 2x2 grid ─────────────────────────────────────────────────── */
.kc-ai-impact-grid[b-z3s1mofaws] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.kc-ai-impact-cell[b-z3s1mofaws] {
    background: var(--kc-color-paper, #FAF8F2);
    border: 1px solid var(--kc-border, #e5e7eb);
    border-radius: 12px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.kc-ai-impact-num[b-z3s1mofaws] {
    font-family: var(--kc-font-serif, "Instrument Serif", Georgia, serif);
    font-size: 36px;
    line-height: 1;
    font-weight: 400;
    color: var(--kc-fg);
    letter-spacing: -0.02em;
}
.kc-ai-impact-lbl[b-z3s1mofaws] {
    font-family: var(--kc-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kc-fg-muted);
}

.kc-analytics-chart[b-z3s1mofaws] { width: 100%; }

/* Responsive */
@media (max-width: 980px) {
    .kc-analytics-row[b-z3s1mofaws] { grid-template-columns: 1fr; }
    .kc-funnel-row[b-z3s1mofaws] { grid-template-columns: 1fr; gap: 4px; }
    .kc-ai-impact-grid[b-z3s1mofaws] { grid-template-columns: 1fr; }
}
/* /Components/Pages/KnowledgeBase.razor.rz.scp.css */
/* KnowledgeBase.razor — complements global page-header / kpi-grid / card / kc-pill tokens.
   Custom styles only for the retrieval playground + drag-drop file dropzone. */

.empty-state[b-ql82ot0f5m] {
    text-align: center;
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.empty-state h3[b-ql82ot0f5m] { margin: 0; font-size: 18px; }

/* ── Retrieval playground (card with ruled-paper background) ─────────────── */
.kc-kb-playground[b-ql82ot0f5m] {
    margin-top: 16px;
    padding: 24px 24px 28px;
    background-image:
        repeating-linear-gradient(0deg,
            transparent 0,
            transparent 27px,
            color-mix(in srgb, var(--kc-color-emerald, #10B981) 4%, transparent) 27px,
            color-mix(in srgb, var(--kc-color-emerald, #10B981) 4%, transparent) 28px);
}
.kc-kb-playground-head[b-ql82ot0f5m] { margin-bottom: 14px; }
.kc-kb-playground-eyebrow[b-ql82ot0f5m] {
    font-family: var(--kc-font-mono, ui-monospace);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kc-color-emerald, #10B981);
    margin-bottom: 8px;
}
.kc-kb-playground-title[b-ql82ot0f5m] {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--kc-fg);
}
.kc-kb-playground-lead[b-ql82ot0f5m] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
}
.kc-kb-playground-input[b-ql82ot0f5m] {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    align-items: stretch;
}
.kc-kb-playground-textbox[b-ql82ot0f5m] {
    flex: 1;
}
.kc-kb-playground-empty[b-ql82ot0f5m] {
    margin-top: 16px;
    padding: 22px;
    text-align: center;
    font-style: italic;
    border: 1px dashed var(--kc-border);
    border-radius: 12px;
}

.kc-kb-hits[b-ql82ot0f5m] {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kc-kb-hit[b-ql82ot0f5m] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding: 14px 16px;
    background: var(--kc-bg-elevated);
    border: 1px solid var(--kc-border);
    border-radius: 12px;
    transition: border-color 140ms ease, transform 140ms ease;
}
.kc-kb-hit:hover[b-ql82ot0f5m] {
    border-color: color-mix(in srgb, var(--kc-color-emerald, #10B981) 25%, var(--kc-border));
    transform: translateX(2px);
}
.kc-kb-hit-rank[b-ql82ot0f5m] {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--kc-color-ink, #0F2419);
    color: var(--kc-color-lime, #C6F24B);
    font-family: var(--kc-font-mono);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kc-kb-hit-body[b-ql82ot0f5m] { min-width: 0; }
.kc-kb-hit-head[b-ql82ot0f5m] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.kc-kb-hit-doc[b-ql82ot0f5m] { font-size: 13px; font-weight: 600; color: var(--kc-fg); }
.kc-kb-hit-chunk[b-ql82ot0f5m],
.kc-kb-hit-score[b-ql82ot0f5m] {
    font-family: var(--kc-font-mono);
    font-size: 11px;
    color: var(--kc-fg-muted);
}
.kc-kb-hit-score[b-ql82ot0f5m] {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--kc-color-emerald, #10B981) 8%, transparent);
    color: var(--kc-color-emerald, #10B981);
}
.kc-kb-hit-content[b-ql82ot0f5m] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--kc-fg);
    background: var(--kc-color-paper, #FAF8F2);
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--kc-color-emerald, #10B981);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ── Drag-drop file zone (inside DxPopup) ────────────────────────────────── */
.kc-kb-dropzone[b-ql82ot0f5m] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 24px;
    border-radius: 12px;
    border: 2px dashed color-mix(in srgb, var(--kc-color-emerald, #10B981) 50%, var(--kc-border));
    background:
        repeating-linear-gradient(45deg,
            var(--kc-color-paper, #FAF8F2) 0,
            var(--kc-color-paper, #FAF8F2) 14px,
            color-mix(in srgb, var(--kc-color-bone, #F5F1E8) 40%, transparent) 14px,
            color-mix(in srgb, var(--kc-color-bone, #F5F1E8) 40%, transparent) 15px);
    cursor: pointer;
    transition: all 200ms ease;
    text-align: center;
    width: 100%;
}
.kc-kb-dropzone:hover[b-ql82ot0f5m] {
    border-color: var(--kc-color-emerald, #10B981);
    background-color: color-mix(in srgb, var(--kc-color-emerald, #10B981) 5%, var(--kc-bg-elevated));
}
.kc-kb-dropzone.is-loaded[b-ql82ot0f5m] {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--kc-color-emerald, #10B981) 8%, var(--kc-bg-elevated)),
            color-mix(in srgb, var(--kc-color-lime, #C6F24B) 10%, var(--kc-bg-elevated)));
    border-style: solid;
    border-color: var(--kc-color-emerald, #10B981);
}
.kc-kb-dropzone i[b-ql82ot0f5m] {
    font-size: 32px;
    color: var(--kc-color-emerald, #10B981);
}
.kc-kb-dropzone-input[b-ql82ot0f5m] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.kc-kb-dropzone-label[b-ql82ot0f5m] {
    font-weight: 600;
    color: var(--kc-fg);
    font-size: 14px;
}
.kc-kb-dropzone-hint[b-ql82ot0f5m] {
    font-size: 11.5px;
    color: var(--kc-fg-muted);
    font-family: var(--kc-font-mono);
    letter-spacing: 0.06em;
}
.kc-kb-dropzone-name[b-ql82ot0f5m] {
    font-weight: 600;
    color: var(--kc-fg);
    font-size: 14px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.kc-kb-dropzone-size[b-ql82ot0f5m] {
    font-family: var(--kc-font-mono);
    font-size: 11px;
    color: var(--kc-fg-muted);
}

/* Responsive */
@media (max-width: 720px) {
    .kc-kb-playground-input[b-ql82ot0f5m] { flex-direction: column; }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* =============================================================================
   Login · editorial split-screen.
   Left: ink panel — display title + sample message + channel ring.
   Right: paper panel — form with generous space, pill CTA.
   Tokens come from /brand/tokens/tokens.css. No magic hex except inside rgba()
   for tinted overlays where the var() can't be used directly.
   ============================================================================= */

.kc-login[b-e3wbhgzier] {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 100vh;
    background: var(--kc-color-paper);
    color: var(--kc-fg);
    font-family: var(--kc-font-sans);
    overflow: hidden;
    --reveal-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ── Hero · ink ─────────────────────────────────────────────────────────── */

.kc-login-hero[b-e3wbhgzier] {
    position: relative;
    background: var(--kc-color-ink);
    color: var(--kc-color-bone);
    padding: 56px 64px 48px;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 32px;
    overflow: hidden;
    isolation: isolate;
}

/* Subtle grain — feels printed, not flat. */
.kc-login-hero-grain[b-e3wbhgzier] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(244, 241, 234, 0.04) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
}

/* Lime glow anchored bottom-left, drifts in on load. */
.kc-login-hero-glow[b-e3wbhgzier] {
    position: absolute;
    width: 540px;
    height: 540px;
    bottom: -180px;
    left: -180px;
    background: radial-gradient(circle, rgba(198, 242, 75, 0.22) 0%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
    animation: kc-glow-drift-b-e3wbhgzier 1200ms 200ms var(--reveal-ease) both;
}

.kc-login-hero > *:not(.kc-login-hero-grain):not(.kc-login-hero-glow)[b-e3wbhgzier] {
    position: relative;
    z-index: 1;
}

.kc-login-hero-top[b-e3wbhgzier] {
    display: flex;
    align-items: center;
    gap: 24px;
    animation: kc-fade-up-b-e3wbhgzier 600ms var(--reveal-ease) both;
}

/* Brand block — the chat-bubble mark stands alone (~96px) as the iconic
   anchor; the wordmark and eyebrow stack to its right at supporting scale. */
.kc-login-brand[b-e3wbhgzier] {
    display: flex;
    align-items: center;
    gap: 18px;
}
.kc-login-brand-mark[b-e3wbhgzier] {
    height: 96px;
    width: auto;
    display: block;
    flex-shrink: 0;
    filter: drop-shadow(0 0 32px rgba(198, 242, 75, 0.28));
}
.kc-login-brand-stack[b-e3wbhgzier] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.kc-login-brand-word[b-e3wbhgzier] {
    height: 28px;
    width: auto;
    display: block;
}
.kc-login-brand-eyebrow[b-e3wbhgzier] {
    /* slightly tighter than the default eyebrow so it sits well under the wordmark */
    font-size: 10.5px;
    color: rgba(244, 241, 234, 0.55);
}

.kc-login-eyebrow[b-e3wbhgzier] {
    font-family: var(--kc-font-mono);
    font-size: 11px;
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.5);
    font-weight: var(--kc-weight-semibold);
}

.kc-login-eyebrow--dark[b-e3wbhgzier] { color: var(--kc-fg-muted); }

/* ── Display headline ───────────────────────────────────────────────────── */

.kc-login-display[b-e3wbhgzier] {
    margin: 0;
    font-weight: var(--kc-weight-semibold);
    font-size: clamp(56px, 7.5vw, 96px);
    line-height: 0.96;
    letter-spacing: -0.045em;
    color: var(--kc-color-bone);
}
.kc-login-line[b-e3wbhgzier] {
    display: block;
    animation: kc-fade-up-b-e3wbhgzier 700ms 200ms var(--reveal-ease) both;
}
.kc-login-italic[b-e3wbhgzier] {
    display: block;
    font-family: var(--kc-font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--kc-color-lime);
    animation: kc-tilt-in-b-e3wbhgzier 800ms 380ms var(--reveal-ease) both;
}

.kc-login-lead[b-e3wbhgzier] {
    margin: 0;
    max-width: 460px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(244, 241, 234, 0.72);
    animation: kc-fade-up-b-e3wbhgzier 700ms 480ms var(--reveal-ease) both;
}

/* ── Sample inbox message ───────────────────────────────────────────────── */

.kc-login-sample[b-e3wbhgzier] {
    background: var(--kc-color-ink-3);
    border: 1px solid var(--kc-color-ink-4);
    border-radius: var(--kc-radius-xl);
    padding: 18px 20px;
    max-width: 460px;
    box-shadow:
        0 0 0 1px rgba(167, 139, 250, 0.18) inset,
        0 18px 40px rgba(0, 0, 0, 0.35);
    animation: kc-fade-up-b-e3wbhgzier 700ms 620ms var(--reveal-ease) both;
}

.kc-login-sample-head[b-e3wbhgzier] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--kc-font-mono);
    font-size: 11px;
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    font-weight: var(--kc-weight-semibold);
}
.kc-login-sample-glyph[b-e3wbhgzier] { color: var(--kc-color-ai-suggested); font-size: 14px; }
.kc-login-sample-eyebrow[b-e3wbhgzier] { color: var(--kc-color-ai-suggested); }
.kc-login-sample-time[b-e3wbhgzier] { margin-left: auto; color: rgba(244, 241, 234, 0.4); letter-spacing: 0.06em; }

.kc-login-sample-body[b-e3wbhgzier] {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--kc-color-bone);
}

.kc-login-sample-actions[b-e3wbhgzier] { display: flex; flex-wrap: wrap; gap: 6px; }

.kc-login-sample-pill[b-e3wbhgzier] {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: var(--kc-radius-pill);
    font-size: 11.5px;
    font-weight: var(--kc-weight-semibold);
    letter-spacing: -0.005em;
    background: rgba(244, 241, 234, 0.06);
    color: rgba(244, 241, 234, 0.78);
    border: 1px solid rgba(244, 241, 234, 0.08);
}
.kc-login-sample-pill--primary[b-e3wbhgzier] {
    background: var(--kc-color-lime);
    color: var(--kc-color-ink);
    border-color: transparent;
}
.kc-login-sample-pill--ghost[b-e3wbhgzier] {
    background: transparent;
    color: rgba(244, 241, 234, 0.5);
}

/* ── Channel ring ───────────────────────────────────────────────────────── */

.kc-login-channels[b-e3wbhgzier] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.kc-login-channels li[b-e3wbhgzier] {
    --ch: var(--kc-color-bone);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(244, 241, 234, 0.04);
    border: 1px solid rgba(244, 241, 234, 0.10);
    color: var(--ch);
    box-shadow: inset 0 0 0 0 var(--ch);
    transition: transform var(--kc-duration-base) var(--reveal-ease),
                box-shadow var(--kc-duration-base) var(--reveal-ease),
                background var(--kc-duration-base) var(--reveal-ease);
    animation: kc-pop-b-e3wbhgzier 460ms var(--reveal-ease) both;
}
.kc-login-channels li:nth-child(1)[b-e3wbhgzier] { animation-delay: 800ms; }
.kc-login-channels li:nth-child(2)[b-e3wbhgzier] { animation-delay: 870ms; }
.kc-login-channels li:nth-child(3)[b-e3wbhgzier] { animation-delay: 940ms; }
.kc-login-channels li:nth-child(4)[b-e3wbhgzier] { animation-delay: 1010ms; }
.kc-login-channels li:nth-child(5)[b-e3wbhgzier] { animation-delay: 1080ms; }
.kc-login-channels li:nth-child(6)[b-e3wbhgzier] { animation-delay: 1150ms; }
.kc-login-channels li:hover[b-e3wbhgzier] {
    transform: translateY(-3px);
    background: color-mix(in oklab, var(--ch) 18%, transparent);
    box-shadow: inset 0 0 0 1px var(--ch), 0 8px 20px color-mix(in oklab, var(--ch) 24%, transparent);
}
.kc-login-channels img[b-e3wbhgzier] { width: 18px; height: 18px; display: block; }
.kc-login-channels i[b-e3wbhgzier] { font-size: 16px; }

/* ── Form pane · paper ──────────────────────────────────────────────────── */

.kc-login-pane[b-e3wbhgzier] {
    position: relative;
    padding: 48px 56px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 32px;
    background:
        radial-gradient(900px 500px at 110% -10%, rgba(16, 185, 129, 0.07) 0%, transparent 55%),
        var(--kc-color-paper);
    animation: kc-slide-r-b-e3wbhgzier 700ms 100ms var(--reveal-ease) both;
}

/* Mobile mark only shows when hero is hidden (small viewports). */
.kc-login-mobile-mark[b-e3wbhgzier] { display: none; }
.kc-login-mobile-mark img[b-e3wbhgzier] { height: 28px; width: auto; }

.kc-login-form-wrap[b-e3wbhgzier] {
    align-self: center;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kc-login-h2[b-e3wbhgzier] {
    margin: 6px 0 4px;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: var(--kc-weight-semibold);
    color: var(--kc-fg);
    animation: kc-fade-up-b-e3wbhgzier 600ms 350ms var(--reveal-ease) both;
}

.kc-login-sub[b-e3wbhgzier] {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--kc-fg-muted);
    animation: kc-fade-up-b-e3wbhgzier 600ms 430ms var(--reveal-ease) both;
}

.kc-login-form[b-e3wbhgzier] { display: flex; flex-direction: column; gap: 12px; }

.kc-login-field[b-e3wbhgzier] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: kc-fade-up-b-e3wbhgzier 600ms calc(520ms + var(--idx, 0) * 70ms) var(--reveal-ease) both;
}
.kc-login-form .kc-login-field:nth-of-type(1)[b-e3wbhgzier] { --idx: 0; }
.kc-login-form .kc-login-field:nth-of-type(2)[b-e3wbhgzier] { --idx: 1; }
.kc-login-form .kc-login-field:nth-of-type(3)[b-e3wbhgzier] { --idx: 2; }

.kc-login-field-label[b-e3wbhgzier] {
    font-family: var(--kc-font-mono);
    font-size: 10.5px;
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    font-weight: var(--kc-weight-semibold);
    color: var(--kc-fg-muted);
}

.kc-login-field[b-e3wbhgzier]  input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: var(--kc-radius-md);
    border: 1px solid var(--kc-border);
    background: var(--kc-bg-elevated);
    color: var(--kc-fg);
    font-family: var(--kc-font-sans);
    font-size: 14.5px;
    line-height: 1.4;
    outline: none;
    transition: border-color var(--kc-duration-fast) var(--reveal-ease),
                box-shadow var(--kc-duration-fast) var(--reveal-ease),
                background var(--kc-duration-fast) var(--reveal-ease);
}
.kc-login-field[b-e3wbhgzier]  input::placeholder {
    color: var(--kc-fg-subtle);
}
.kc-login-field[b-e3wbhgzier]  input:hover {
    border-color: var(--kc-border-strong);
}
.kc-login-field[b-e3wbhgzier]  input:focus {
    border-color: var(--kc-color-emerald);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
    background: #FFFFFF;
}

/* Validation message tweaks (Blazor renders ValidationMessage as ::deep span). */
.kc-login-form[b-e3wbhgzier]  .validation-message {
    color: var(--kc-color-danger);
    font-size: 12px;
    margin-top: 2px;
}

.kc-login-error[b-e3wbhgzier] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--kc-radius-md);
    background: rgba(239, 68, 68, 0.08);
    color: var(--kc-color-danger);
    border: 1px solid rgba(239, 68, 68, 0.18);
    font-size: 13px;
}
.kc-login-error i[b-e3wbhgzier] { font-size: 14px; flex-shrink: 0; }

/* CTA — pill, full-width on the form column. */
.kc-login-submit[b-e3wbhgzier] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 24px;
    border: 0;
    border-radius: var(--kc-radius-pill);
    background: var(--kc-color-ink);
    color: var(--kc-color-bone);
    font-family: var(--kc-font-sans);
    font-size: 14.5px;
    font-weight: var(--kc-weight-semibold);
    letter-spacing: -0.005em;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(11, 20, 16, 0.25);
    transition: transform var(--kc-duration-fast) var(--reveal-ease),
                box-shadow var(--kc-duration-fast) var(--reveal-ease),
                background var(--kc-duration-fast) var(--reveal-ease);
    animation: kc-fade-up-b-e3wbhgzier 600ms 760ms var(--reveal-ease) both;
}
.kc-login-submit:hover:not(:disabled)[b-e3wbhgzier] {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(11, 20, 16, 0.32),
                inset 0 0 0 1px var(--kc-color-lime);
}
.kc-login-submit:active:not(:disabled)[b-e3wbhgzier] {
    transform: translateY(0);
}
.kc-login-submit:disabled[b-e3wbhgzier] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}
.kc-login-submit i[b-e3wbhgzier] { font-size: 12px; opacity: 0.85; }

.kc-login-noaccount[b-e3wbhgzier] {
    margin: 18px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--kc-fg-muted);
    text-align: center;
    animation: kc-fade-up-b-e3wbhgzier 600ms 880ms var(--reveal-ease) both;
}

/* Phase 12 — magic link + forgot password footer links on the password step. */
.kc-login-alt-links[b-e3wbhgzier] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}
.kc-login-link-btn[b-e3wbhgzier] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--kc-border, #e5e7eb);
    background: transparent;
    color: var(--kc-fg-muted, #64748b);
    font-size: 12.5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 140ms ease;
}
.kc-login-link-btn:hover:not(:disabled)[b-e3wbhgzier] {
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
}
.kc-login-link-btn:disabled[b-e3wbhgzier] {
    opacity: 0.55;
    cursor: not-allowed;
}
.kc-login-link-btn i[b-e3wbhgzier] { font-size: 12px; }

/* Phase 12 Slice 2b — Google sign-in */
.kc-login-divider[b-e3wbhgzier] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    color: var(--kc-fg-muted, #64748b);
    font-family: var(--kc-font-mono, ui-monospace);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.kc-login-divider[b-e3wbhgzier]::before,
.kc-login-divider[b-e3wbhgzier]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--kc-border, #e5e7eb);
}
/* ─── Social login buttons (refined SaaS-minimal, brand-kit-driven) ───────────────
   Diseño:
   - Stack vertical uniforme — mismo height, mismo padding, mismo radius pill.
   - Fondo paper + borde kc-border (consistente con inputs y otros pill-buttons).
   - Color del texto = kc-fg (ink). Color del icono = brand del provider (G azul Google,
     f azul Facebook) en un cuadrito de fondo white-bone sutil que ancla el logo a la izquierda.
   - Hover: borde emerald + glow lime sutil + lift 1px. Coherente con kc-pill primary del
     resto del UI sin gritar.
   - NO se usan los colores corporativos como fondo del botón completo: produce el "feo
     mixto blanco/azul" del screenshot anterior. El logo lleva el color de marca; el botón
     lleva el brand kit. */

.kc-login-social-list[b-e3wbhgzier] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.kc-login-social[b-e3wbhgzier] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid var(--kc-border, rgba(11,20,16,0.10));
    background: var(--kc-color-paper, #FBF9F4);
    color: var(--kc-fg, #0B1410);
    font-family: var(--kc-font-sans);
    font-size: 14px;
    font-weight: var(--kc-weight-semibold, 600);
    line-height: 1;
    cursor: pointer;
    transition:
        border-color 140ms ease,
        box-shadow 180ms ease,
        transform 140ms ease,
        background 140ms ease;
}

.kc-login-social:hover:not(:disabled)[b-e3wbhgzier] {
    border-color: var(--kc-color-emerald, #10B981);
    box-shadow:
        0 0 0 4px rgba(16,185,129,0.08),
        0 6px 14px -10px rgba(11,20,16,0.18);
    transform: translateY(-1px);
}

.kc-login-social:active:not(:disabled)[b-e3wbhgzier] {
    transform: translateY(0);
    background: var(--kc-bg-elevated, #F4F1EA);
}

.kc-login-social:disabled[b-e3wbhgzier] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Logo container — fija el ancho para que el texto del label quede en columna alineada
   incluso si el provider tiene un glifo más grueso/delgado que el otro. */
.kc-login-social-icon[b-e3wbhgzier] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 6px;
    line-height: 1;
}

.kc-login-social-label[b-e3wbhgzier] {
    flex: 1;
    text-align: center;
    /* Compensa el offset visual del icono a la izquierda para que el label
       se sienta visualmente centrado sin tener que romper el alineamiento real. */
    margin-right: 22px;
}

/* Brand colors aplicados al ÍCONO, no al botón entero — preserva legibilidad
   y consistencia visual mientras conserva el reconocimiento del provider. */
.kc-login-social--google .kc-login-social-icon[b-e3wbhgzier] {
    color: #4285F4;
}
.kc-login-social--facebook .kc-login-social-icon[b-e3wbhgzier] {
    color: #1877F2;
}
/* Apple Sign-In: el branding oficial es negro sobre blanco (modo light). */
.kc-login-social--apple .kc-login-social-icon[b-e3wbhgzier] {
    color: #000000;
}

/* Spinner state cuando se está procesando — el ícono se vuelve neutro mientras gira. */
.kc-login-social:disabled .kc-login-social-icon[b-e3wbhgzier] {
    color: var(--kc-color-neutral, rgba(11,20,16,0.62));
}

/* Lista de tenants (cuando el email matchea N>1 workspaces). */
.kc-login-social-tenants[b-e3wbhgzier] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--kc-bg-elevated, #F4F1EA);
    border: 1px solid var(--kc-border, rgba(11,20,16,0.10));
}

/* Phase 12 account linking — modal de confirmación cuando social provider matchea un user con password. */
.kc-link-modal-backdrop[b-e3wbhgzier] {
    position: fixed;
    inset: 0;
    background: rgba(11, 20, 16, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: kc-fade-in 160ms ease-out;
}
.kc-link-modal[b-e3wbhgzier] {
    background: var(--kc-color-paper, #fff);
    border-radius: 14px;
    padding: 24px 26px;
    max-width: 420px;
    width: calc(100vw - 32px);
    box-shadow: 0 24px 60px -16px rgba(11, 20, 16, 0.32);
}
.kc-link-modal-title[b-e3wbhgzier] {
    font-family: var(--kc-font-sans);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--kc-fg);
}
.kc-link-modal-body[b-e3wbhgzier] {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--kc-fg);
    margin: 0 0 8px 0;
}
.kc-link-modal-hint[b-e3wbhgzier] {
    font-size: 12px;
    color: var(--kc-color-neutral);
    margin: 0 0 18px 0;
    line-height: 1.5;
}
.kc-link-modal-actions[b-e3wbhgzier] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}

.kc-login-link[b-e3wbhgzier] {
    color: var(--kc-color-emerald);
    font-weight: var(--kc-weight-semibold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--kc-duration-fast) var(--reveal-ease);
}
.kc-login-link:hover[b-e3wbhgzier] { border-bottom-color: var(--kc-color-emerald); }

.kc-login-link-btn[b-e3wbhgzier] {
    background: transparent;
    border: 0;
    color: var(--kc-color-emerald);
    font-family: var(--kc-font-sans);
    font-size: 12px;
    font-weight: var(--kc-weight-semibold);
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}
.kc-login-link-btn:hover[b-e3wbhgzier] { text-decoration: underline; text-underline-offset: 3px; }

/* Pill that displays the email/tenant resolved in step 1, with a "change" link */
.kc-login-email-pill[b-e3wbhgzier],
.kc-login-tenant-pill[b-e3wbhgzier] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 14px;
    border-radius: var(--kc-radius-pill);
    background: var(--kc-bg-muted);
    border: 1px solid var(--kc-border);
    font-size: 13px;
    color: var(--kc-fg);
    animation: kc-fade-up-b-e3wbhgzier 500ms var(--reveal-ease) both;
}
.kc-login-email-pill > i[b-e3wbhgzier] { color: var(--kc-fg-muted); font-size: 12px; }
.kc-login-email-pill > span[b-e3wbhgzier],
.kc-login-tenant-pill-name[b-e3wbhgzier] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--kc-weight-medium); }

.kc-login-tenant-pill[b-e3wbhgzier] { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.22); }
.kc-login-tenant-pill-logo[b-e3wbhgzier] { height: 18px; width: auto; }
.kc-login-tenant-pill-mark[b-e3wbhgzier] {
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--kc-color-emerald);
    color: white;
    display: grid; place-items: center;
    font-size: 11px; font-weight: var(--kc-weight-bold);
}

/* Tenant picker — when email belongs to multiple workspaces */
.kc-login-pick[b-e3wbhgzier] { display: flex; flex-direction: column; gap: 14px; }
.kc-login-tenants[b-e3wbhgzier] {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
    animation: kc-fade-up-b-e3wbhgzier 500ms 80ms var(--reveal-ease) both;
}
.kc-login-tenant-card[b-e3wbhgzier] {
    width: 100%;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--kc-bg-elevated);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    cursor: pointer;
    font-family: var(--kc-font-sans);
    text-align: left;
    color: var(--kc-fg);
    transition: border-color var(--kc-duration-fast) var(--reveal-ease),
                transform var(--kc-duration-fast) var(--reveal-ease),
                box-shadow var(--kc-duration-fast) var(--reveal-ease);
}
.kc-login-tenant-card:hover[b-e3wbhgzier] {
    border-color: var(--kc-color-emerald);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(11, 20, 16, 0.08);
}
.kc-login-tenant-card > i[b-e3wbhgzier] { color: var(--kc-fg-muted); font-size: 12px; }
.kc-login-tenant-logo[b-e3wbhgzier] { height: 28px; width: auto; }
.kc-login-tenant-mark[b-e3wbhgzier] {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--kc-color-ink);
    color: var(--kc-color-lime);
    display: grid; place-items: center;
    font-weight: var(--kc-weight-bold); font-size: 14px;
    flex-shrink: 0;
}
.kc-login-tenant-meta[b-e3wbhgzier] {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.kc-login-tenant-meta strong[b-e3wbhgzier] { font-weight: var(--kc-weight-semibold); font-size: 14px; }
.kc-login-tenant-meta em[b-e3wbhgzier] {
    font-style: normal;
    font-family: var(--kc-font-mono);
    font-size: 11px;
    color: var(--kc-fg-muted);
    letter-spacing: 0.04em;
}

/* No-workspace state */
.kc-login-noworkspace[b-e3wbhgzier] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 22px 0;
    animation: kc-fade-up-b-e3wbhgzier 500ms var(--reveal-ease) both;
}
.kc-login-noworkspace-icon[b-e3wbhgzier] {
    width: 52px; height: 52px;
    border-radius: var(--kc-radius-lg);
    background: rgba(167, 139, 250, 0.12);
    color: var(--kc-color-ai-suggested);
    display: grid; place-items: center;
    font-size: 22px;
}
.kc-login-noworkspace h3[b-e3wbhgzier] {
    margin: 0;
    font: var(--kc-weight-semibold) 18px/1.2 var(--kc-font-sans);
    letter-spacing: -0.015em;
}
.kc-login-noworkspace p[b-e3wbhgzier] {
    margin: 0;
    font-size: 13.5px; line-height: 1.5;
    color: var(--kc-fg-muted);
}
.kc-login-noworkspace-actions[b-e3wbhgzier] {
    display: flex; flex-direction: column; gap: 10px;
    align-self: stretch;
    margin-top: 4px;
}
.kc-login-submit--primary-link[b-e3wbhgzier] {
    text-decoration: none;
    background: var(--kc-color-emerald);
    color: white;
    margin-top: 0;
}
.kc-login-submit--primary-link:hover[b-e3wbhgzier] {
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.32);
}

.kc-login-footer[b-e3wbhgzier] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--kc-border);
    animation: kc-fade-up-b-e3wbhgzier 600ms 950ms var(--reveal-ease) both;
}

/* ── Animations ─────────────────────────────────────────────────────────── */

@keyframes kc-fade-up-b-e3wbhgzier {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes kc-tilt-in-b-e3wbhgzier {
    from { opacity: 0; transform: translateY(20px) rotate(-2.5deg); }
    to   { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes kc-pop-b-e3wbhgzier {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes kc-slide-r-b-e3wbhgzier {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes kc-glow-drift-b-e3wbhgzier {
    from { opacity: 0; transform: translate(-40px, 60px) scale(0.85); }
    to   { opacity: 1; transform: translate(0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .kc-login *[b-e3wbhgzier], .kc-login *[b-e3wbhgzier]::before, .kc-login *[b-e3wbhgzier]::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .kc-login[b-e3wbhgzier] {
        grid-template-columns: 1fr;
    }
    .kc-login-hero[b-e3wbhgzier] {
        padding: 40px 32px 32px;
        min-height: 420px;
    }
    .kc-login-display[b-e3wbhgzier] {
        font-size: clamp(48px, 9vw, 72px);
    }
    .kc-login-pane[b-e3wbhgzier] {
        padding: 32px 24px;
    }
    .kc-login-mobile-mark[b-e3wbhgzier] {
        display: none; /* hero still shows mark, no need */
    }
}

@media (max-width: 640px) {
    .kc-login-hero[b-e3wbhgzier] {
        display: none;
    }
    .kc-login-mobile-mark[b-e3wbhgzier] { display: block; margin-bottom: 8px; }
    .kc-login-pane[b-e3wbhgzier] {
        grid-template-rows: auto 1fr auto;
        gap: 24px;
        padding: 24px 20px;
        min-height: 100vh;
        background:
            radial-gradient(600px 320px at 110% -10%, rgba(16, 185, 129, 0.08) 0%, transparent 55%),
            radial-gradient(420px 240px at -10% 100%, rgba(198, 242, 75, 0.10) 0%, transparent 60%),
            var(--kc-color-paper);
    }
    .kc-login-h2[b-e3wbhgzier] { font-size: 28px; }
}


/* SaaS-1 follow-up · 2FA step (TOTP verification durante login). Reusa visual del
   .kc-login-form pero con header dedicado + input grande mono para los 6 dígitos. */
.kc-login-2fa-header[b-e3wbhgzier] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}
.kc-login-2fa-header i[b-e3wbhgzier] {
    font-size: 32px;
    color: var(--kc-color-emerald);
}
.kc-login-2fa-header h2[b-e3wbhgzier] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--kc-fg);
}
.kc-login-2fa-header p[b-e3wbhgzier] {
    margin: 0;
    font-size: 14px;
    color: var(--kc-fg-muted);
    line-height: 1.45;
}
.kc-login-2fa-input[b-e3wbhgzier] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-md);
    font-family: var(--kc-font-mono);
    font-size: 22px;
    letter-spacing: 0.18em;
    text-align: center;
    background: var(--kc-bg-elevated);
    color: var(--kc-fg);
}
.kc-login-2fa-input:focus[b-e3wbhgzier] {
    outline: none;
    border-color: var(--kc-color-emerald);
    box-shadow: 0 0 0 3px var(--kc-focus-ring);
}

/* /Components/Pages/Metrics.razor.rz.scp.css */
.kc-metrics-toolbar[b-z577yfs0lm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.kc-metrics-tabs[b-z577yfs0lm] {
    display: inline-flex;
    background: var(--kc-color-bone-2, var(--bg-card));
    border: 1px solid var(--kc-border, var(--border));
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.kc-metrics-tab[b-z577yfs0lm] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--kc-fg-muted, var(--text-secondary));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.kc-metrics-tab.active[b-z577yfs0lm] {
    background: var(--kc-color-emerald, #10B981);
    color: white;
}

.kc-metrics-tab:not(.active):hover[b-z577yfs0lm] {
    background: rgba(16, 185, 129, 0.08);
    color: var(--kc-fg, var(--text-primary));
}

.kc-metrics-period[b-z577yfs0lm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kc-metrics-period label[b-z577yfs0lm] {
    font-family: var(--kc-font-mono, ui-monospace), monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kc-fg-muted, var(--text-secondary));
}

.kc-metrics-presets[b-z577yfs0lm] {
    display: inline-flex;
    gap: 4px;
    margin-left: 4px;
}

.kc-metrics-presets .link-btn[b-z577yfs0lm] {
    background: transparent;
    border: 1px solid var(--kc-border, var(--border));
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--kc-fg-muted, var(--text-secondary));
}

.kc-metrics-presets .link-btn:hover[b-z577yfs0lm] {
    border-color: var(--kc-color-emerald, #10B981);
    color: var(--kc-color-emerald, #10B981);
}
/* /Components/Pages/NotificationsAdmin.razor.rz.scp.css */
.kc-routes[b-cl82w548ic] { display: flex; flex-direction: column; gap: 4px; }

.kc-routes-head[b-cl82w548ic],
.kc-routes-row[b-cl82w548ic] {
    display: grid;
    grid-template-columns: 1fr 88px 88px 88px;
    align-items: center;
    gap: 12px;
}

.kc-routes-head[b-cl82w548ic] {
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--kc-border);
    font-family: var(--kc-font-mono);
    font-size: 11px;
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    color: var(--kc-fg-muted);
    font-weight: var(--kc-weight-semibold);
}

.kc-routes-channel[b-cl82w548ic] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: center;
}
.kc-routes-channel img[b-cl82w548ic] { width: 14px; height: 14px; }

.kc-routes-row[b-cl82w548ic] {
    padding: 14px 16px;
    border-radius: var(--kc-radius-md);
    transition: background var(--kc-duration-fast) var(--kc-ease-standard);
}
.kc-routes-row:hover[b-cl82w548ic] { background: var(--kc-bg-muted); }

.kc-routes-kind[b-cl82w548ic] {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.kc-routes-kind strong[b-cl82w548ic] {
    font-size: 14px;
    font-weight: var(--kc-weight-semibold);
    color: var(--kc-fg);
}
.kc-routes-kind em[b-cl82w548ic] {
    font-style: normal;
    font-size: 12px;
    color: var(--kc-fg-muted);
    line-height: 1.45;
}
.kc-routes-default[b-cl82w548ic] {
    align-self: flex-start;
    font-family: var(--kc-font-mono);
    font-size: 9.5px;
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    color: var(--kc-fg-subtle);
    background: var(--kc-bg-muted);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-pill);
    padding: 1px 6px;
    margin-top: 2px;
}

/* Toggle — pure CSS pill switch, lime cuando active */
.kc-routes-toggle[b-cl82w548ic] {
    position: relative;
    display: inline-block;
    width: 42px; height: 24px;
    justify-self: center;
    cursor: pointer;
}
.kc-routes-toggle input[b-cl82w548ic] {
    opacity: 0; width: 0; height: 0;
}
.kc-routes-toggle-track[b-cl82w548ic] {
    position: absolute;
    inset: 0;
    background: var(--kc-border-strong);
    border-radius: 999px;
    transition: background var(--kc-duration-base) var(--kc-ease-standard);
}
.kc-routes-toggle-track[b-cl82w548ic]::before {
    content: '';
    position: absolute;
    height: 18px; width: 18px;
    left: 3px; top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform var(--kc-duration-base) var(--kc-ease-emphasis);
    box-shadow: 0 2px 4px rgba(11, 20, 16, 0.15);
}
.kc-routes-toggle input:checked + .kc-routes-toggle-track[b-cl82w548ic] {
    background: var(--kc-color-emerald);
}
.kc-routes-toggle input:checked + .kc-routes-toggle-track[b-cl82w548ic]::before {
    transform: translateX(18px);
}
.kc-routes-toggle input:disabled + .kc-routes-toggle-track[b-cl82w548ic] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.kc-profile-shell[b-aoxoxgqw1z] {
    display: grid;
    gap: var(--kc-space-6, 24px);
    max-width: 760px;
}

.kc-profile-loading[b-aoxoxgqw1z] {
    color: var(--kc-fg-muted, var(--text-muted));
    padding: var(--kc-space-6, 24px) 0;
}

.kc-profile-avatar-row[b-aoxoxgqw1z] {
    display: flex;
    align-items: center;
    gap: var(--kc-space-6, 24px);
    flex-wrap: wrap;
}

.kc-profile-avatar-preview[b-aoxoxgqw1z] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--kc-color-bone-2, var(--bg-card));
    border: 1px solid var(--kc-border, var(--border));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kc-profile-avatar-preview img[b-aoxoxgqw1z] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kc-profile-avatar-initials[b-aoxoxgqw1z] {
    font-family: var(--kc-font-sans, sans-serif);
    font-size: 32px;
    font-weight: 600;
    color: var(--kc-fg, var(--text-primary));
    letter-spacing: -0.01em;
}

.kc-profile-avatar-actions[b-aoxoxgqw1z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    flex: 1;
    min-width: 240px;
}

.kc-profile-upload-btn[b-aoxoxgqw1z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 6px;
    background: var(--kc-color-emerald, #10B981);
    color: white;
    font-family: var(--kc-font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--kc-color-emerald, #10B981);
    transition: background 140ms ease;
}
.kc-profile-upload-btn:hover[b-aoxoxgqw1z] {
    background: color-mix(in srgb, var(--kc-color-emerald, #10B981) 90%, black);
}

.kc-profile-file-input[b-aoxoxgqw1z] {
    /* Hidden — the visible label[for] does the click. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kc-profile-hint[b-aoxoxgqw1z] {
    color: var(--kc-fg-muted, var(--text-muted));
    font-size: 12px;
    line-height: 1.5;
}

.kc-profile-actions[b-aoxoxgqw1z] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
/* /Components/Pages/Security.razor.rz.scp.css */
/* Phase SaaS-1 follow-up · estilos del setup wizard 2FA. Reusa tokens kc-*; sin
   colores hex hardcoded. */

.sec-card .card-header[b-mmlkj56ugy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.sec-status-pill[b-mmlkj56ugy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--kc-radius-pill);
    font: 600 11px/1.2 var(--kc-font-sans);
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.sec-status-pill.sec-status-on[b-mmlkj56ugy] {
    background: var(--kc-color-success-soft);
    color: var(--kc-color-success);
    border-color: var(--kc-color-success);
}
.sec-status-pill.sec-status-off[b-mmlkj56ugy] {
    background: var(--kc-bg-muted);
    color: var(--kc-fg-muted);
    border-color: var(--kc-border);
}

.sec-summary[b-mmlkj56ugy] {
    margin: 0 0 10px 0;
    color: var(--kc-fg-muted);
    line-height: 1.5;
}
.sec-warning[b-mmlkj56ugy] {
    color: var(--kc-color-warning);
    font-weight: 600;
}

.sec-actions[b-mmlkj56ugy] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

/* Overlay/drawer for setup wizard + disable confirm */
.sec-overlay-backdrop[b-mmlkj56ugy] {
    position: fixed; inset: 0;
    background: rgba(11, 20, 16, 0.40);
    z-index: 80;
    animation: secFadeIn-b-mmlkj56ugy var(--kc-duration-base) var(--kc-ease-standard);
}
.sec-overlay[b-mmlkj56ugy] {
    position: fixed; right: 0; top: 0; bottom: 0;
    width: 540px; max-width: 92vw;
    background: var(--kc-bg-elevated);
    border-left: 1px solid var(--kc-border);
    box-shadow: var(--kc-shadow-lg);
    z-index: 90;
    display: flex; flex-direction: column;
    animation: secSlideIn-b-mmlkj56ugy var(--kc-duration-base) var(--kc-ease-standard);
}
.sec-overlay.sec-overlay-narrow[b-mmlkj56ugy] { width: 420px; }
.sec-overlay-head[b-mmlkj56ugy] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--kc-border);
}
.sec-overlay-head h3[b-mmlkj56ugy] { margin: 0; font: 600 18px/1.2 var(--kc-font-sans); color: var(--kc-fg); }
.sec-overlay-body[b-mmlkj56ugy] {
    flex: 1; overflow-y: auto;
    padding: 22px;
    display: flex; flex-direction: column; gap: 22px;
}
.sec-overlay-foot[b-mmlkj56ugy] {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--kc-border);
}

.sec-setup-step[b-mmlkj56ugy] {
    display: flex; gap: 14px;
    align-items: flex-start;
}
.sec-step-num[b-mmlkj56ugy] {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--kc-color-emerald);
    color: var(--kc-color-bone);
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 13px/1 var(--kc-font-mono);
}
.sec-setup-step h4[b-mmlkj56ugy] { margin: 0 0 4px 0; font: 600 14px/1.2 var(--kc-font-sans); color: var(--kc-fg); }
.sec-setup-step p[b-mmlkj56ugy] { margin: 0 0 10px 0; color: var(--kc-fg-muted); font-size: 13px; line-height: 1.5; }

.sec-qr-wrap[b-mmlkj56ugy] {
    display: inline-block;
    padding: 8px;
    background: var(--kc-color-bone);
    border-radius: var(--kc-radius-md);
    border: 1px solid var(--kc-border);
}
.sec-qr-wrap img[b-mmlkj56ugy] { display: block; width: 220px; height: 220px; }

.sec-details[b-mmlkj56ugy] {
    margin-top: 12px;
}
.sec-details summary[b-mmlkj56ugy] {
    cursor: pointer;
    color: var(--kc-color-emerald);
    font-size: 13px;
}
.sec-manual-key[b-mmlkj56ugy] {
    display: block;
    padding: 10px 12px;
    background: var(--kc-bg-muted);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-sm);
    margin-top: 8px;
    word-break: break-all;
    font-size: 13px;
    color: var(--kc-fg);
}

.sec-recovery-list[b-mmlkj56ugy] {
    columns: 2;
    column-gap: 18px;
    padding: 12px;
    background: var(--kc-color-bone-2);
    border: 1px dashed var(--kc-color-warning);
    border-radius: var(--kc-radius-sm);
    list-style: none;
    margin: 0 0 12px;
}
.sec-recovery-list li[b-mmlkj56ugy] {
    padding: 4px 0;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--kc-fg);
    break-inside: avoid;
}
.sec-recovery-ack[b-mmlkj56ugy] {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px;
    color: var(--kc-fg);
    cursor: pointer;
}
.sec-recovery-ack input[b-mmlkj56ugy] { margin-top: 3px; accent-color: var(--kc-color-emerald); }

.sec-verify-input[b-mmlkj56ugy] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-md);
    font-family: var(--kc-font-mono);
    font-size: 22px;
    letter-spacing: 0.18em;
    text-align: center;
    background: var(--kc-bg-elevated);
    color: var(--kc-fg);
}
.sec-verify-input:focus[b-mmlkj56ugy] {
    outline: none;
    border-color: var(--kc-color-emerald);
    box-shadow: 0 0 0 3px var(--kc-focus-ring);
}

.sec-error[b-mmlkj56ugy] {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--kc-color-danger-soft);
    color: var(--kc-color-danger);
    border-radius: var(--kc-radius-sm);
    font-size: 12.5px;
}

@keyframes secFadeIn-b-mmlkj56ugy {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes secSlideIn-b-mmlkj56ugy {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
/* /Components/Pages/Signup.razor.rz.scp.css */
/* Signup · same editorial split-screen system as Login. Reuses Brand Kit tokens. */

.kc-signup[b-n2qbnk0xc7] {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    min-height: 100vh;
    background: var(--kc-color-paper);
    color: var(--kc-fg);
    font-family: var(--kc-font-sans);
    overflow: hidden;
    --reveal-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.kc-signup-hero[b-n2qbnk0xc7] {
    position: relative;
    background: var(--kc-color-ink);
    color: var(--kc-color-bone);
    padding: 56px 64px 48px;
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    gap: 28px;
    overflow: hidden;
    isolation: isolate;
}
.kc-signup-hero-grain[b-n2qbnk0xc7] {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(rgba(244, 241, 234, 0.04) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
}
.kc-signup-hero-glow[b-n2qbnk0xc7] {
    position: absolute;
    width: 540px; height: 540px;
    bottom: -180px; right: -200px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.30) 0%, transparent 65%);
    filter: blur(20px);
    pointer-events: none; z-index: 0;
    animation: kc-glow-drift-b-n2qbnk0xc7 1200ms 200ms var(--reveal-ease) both;
}
.kc-signup-hero > *:not(.kc-signup-hero-grain):not(.kc-signup-hero-glow)[b-n2qbnk0xc7] {
    position: relative; z-index: 1;
}

.kc-signup-hero-top[b-n2qbnk0xc7] {
    display: flex; align-items: center; gap: 24px;
    animation: kc-fade-up-b-n2qbnk0xc7 600ms var(--reveal-ease) both;
}
.kc-signup-brand[b-n2qbnk0xc7] { display: flex; align-items: center; gap: 18px; }
.kc-signup-brand-mark[b-n2qbnk0xc7] {
    height: 88px; width: auto; display: block; flex-shrink: 0;
    filter: drop-shadow(0 0 32px rgba(198, 242, 75, 0.28));
}
.kc-signup-brand-stack[b-n2qbnk0xc7] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.kc-signup-brand-word[b-n2qbnk0xc7] { height: 26px; width: auto; display: block; }

.kc-signup-eyebrow[b-n2qbnk0xc7] {
    font-family: var(--kc-font-mono);
    font-size: 11px;
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.55);
    font-weight: var(--kc-weight-semibold);
}
.kc-signup-eyebrow--dark[b-n2qbnk0xc7] { color: var(--kc-fg-muted); }

.kc-signup-display[b-n2qbnk0xc7] {
    margin: 0;
    font-weight: var(--kc-weight-semibold);
    font-size: clamp(48px, 6.5vw, 84px);
    line-height: 0.96;
    letter-spacing: -0.045em;
    color: var(--kc-color-bone);
}
.kc-signup-display span[b-n2qbnk0xc7] { display: block; animation: kc-fade-up-b-n2qbnk0xc7 700ms 200ms var(--reveal-ease) both; }
.kc-signup-display em[b-n2qbnk0xc7] {
    display: block;
    font-family: var(--kc-font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--kc-color-lime);
    letter-spacing: -0.02em;
    animation: kc-tilt-in-b-n2qbnk0xc7 800ms 380ms var(--reveal-ease) both;
}

.kc-signup-lead[b-n2qbnk0xc7] {
    margin: 0; max-width: 460px;
    font-size: 16px; line-height: 1.55;
    color: rgba(244, 241, 234, 0.72);
    animation: kc-fade-up-b-n2qbnk0xc7 700ms 480ms var(--reveal-ease) both;
}

.kc-signup-checklist[b-n2qbnk0xc7] {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
    animation: kc-fade-up-b-n2qbnk0xc7 700ms 580ms var(--reveal-ease) both;
}
.kc-signup-checklist li[b-n2qbnk0xc7] {
    display: flex; align-items: flex-start; gap: 12px;
    color: rgba(244, 241, 234, 0.85);
    font-size: 14.5px; line-height: 1.45;
}
.kc-signup-checklist i[b-n2qbnk0xc7] {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: rgba(198, 242, 75, 0.15);
    color: var(--kc-color-lime);
    display: grid; place-items: center;
    font-size: 11px; flex-shrink: 0;
    margin-top: 2px;
}

.kc-signup-channels[b-n2qbnk0xc7] {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 10px; flex-wrap: wrap;
    align-self: end;
}
.kc-signup-channels li[b-n2qbnk0xc7] {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(244, 241, 234, 0.04);
    border: 1px solid rgba(244, 241, 234, 0.10);
    display: grid; place-items: center;
    animation: kc-pop-b-n2qbnk0xc7 460ms var(--reveal-ease) both;
}
.kc-signup-channels li:nth-child(1)[b-n2qbnk0xc7] { animation-delay: 800ms; }
.kc-signup-channels li:nth-child(2)[b-n2qbnk0xc7] { animation-delay: 870ms; }
.kc-signup-channels li:nth-child(3)[b-n2qbnk0xc7] { animation-delay: 940ms; }
.kc-signup-channels li:nth-child(4)[b-n2qbnk0xc7] { animation-delay: 1010ms; }
.kc-signup-channels li:nth-child(5)[b-n2qbnk0xc7] { animation-delay: 1080ms; }
.kc-signup-channels img[b-n2qbnk0xc7] { width: 16px; height: 16px; display: block; }

/* ── Form pane ───────────────────────────────────────────────────────── */

.kc-signup-pane[b-n2qbnk0xc7] {
    position: relative;
    padding: 48px 56px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 32px;
    background:
        radial-gradient(900px 500px at 110% -10%, rgba(16, 185, 129, 0.07) 0%, transparent 55%),
        var(--kc-color-paper);
    animation: kc-slide-r-b-n2qbnk0xc7 700ms 100ms var(--reveal-ease) both;
}

.kc-signup-mobile-mark[b-n2qbnk0xc7] { display: none; }
.kc-signup-mobile-mark img[b-n2qbnk0xc7] { height: 28px; width: auto; }

.kc-signup-form-wrap[b-n2qbnk0xc7] {
    align-self: center;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kc-signup-h2[b-n2qbnk0xc7] {
    margin: 6px 0 4px;
    font-size: 32px; line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: var(--kc-weight-semibold);
    color: var(--kc-fg);
    animation: kc-fade-up-b-n2qbnk0xc7 600ms 350ms var(--reveal-ease) both;
}
.kc-signup-sub[b-n2qbnk0xc7] {
    margin: 0 0 18px;
    font-size: 14.5px; line-height: 1.5;
    color: var(--kc-fg-muted);
    animation: kc-fade-up-b-n2qbnk0xc7 600ms 430ms var(--reveal-ease) both;
}

.kc-signup-form[b-n2qbnk0xc7] { display: flex; flex-direction: column; gap: 14px; }

.kc-signup-field[b-n2qbnk0xc7] {
    display: flex; flex-direction: column; gap: 6px;
    animation: kc-fade-up-b-n2qbnk0xc7 600ms calc(520ms + var(--idx, 0) * 60ms) var(--reveal-ease) both;
}
.kc-signup-form .kc-signup-field:nth-of-type(1)[b-n2qbnk0xc7] { --idx: 0; }
.kc-signup-form .kc-signup-field:nth-of-type(2)[b-n2qbnk0xc7] { --idx: 1; }
.kc-signup-form .kc-signup-field:nth-of-type(3)[b-n2qbnk0xc7] { --idx: 2; }

.kc-signup-row[b-n2qbnk0xc7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    animation: kc-fade-up-b-n2qbnk0xc7 600ms 620ms var(--reveal-ease) both;
}
.kc-signup-row .kc-signup-field[b-n2qbnk0xc7] { animation: none; }

.kc-signup-field-label[b-n2qbnk0xc7] {
    font-family: var(--kc-font-mono);
    font-size: 10.5px;
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    font-weight: var(--kc-weight-semibold);
    color: var(--kc-fg-muted);
}

.kc-signup-field-hint[b-n2qbnk0xc7] {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--kc-fg-subtle);
    margin-top: -2px;
}

.kc-signup-field[b-n2qbnk0xc7]  input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: var(--kc-radius-md);
    border: 1px solid var(--kc-border);
    background: var(--kc-bg-elevated);
    color: var(--kc-fg);
    font-family: var(--kc-font-sans);
    font-size: 14.5px;
    line-height: 1.4;
    outline: none;
    transition: border-color var(--kc-duration-fast) var(--reveal-ease),
                box-shadow var(--kc-duration-fast) var(--reveal-ease),
                background var(--kc-duration-fast) var(--reveal-ease);
}
.kc-signup-field[b-n2qbnk0xc7]  input::placeholder { color: var(--kc-fg-subtle); }
.kc-signup-field[b-n2qbnk0xc7]  input:hover { border-color: var(--kc-border-strong); }
.kc-signup-field[b-n2qbnk0xc7]  input:focus {
    border-color: var(--kc-color-emerald);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
    background: #FFFFFF;
}
.kc-signup-form[b-n2qbnk0xc7]  .validation-message {
    color: var(--kc-color-danger);
    font-size: 12px;
    margin-top: 2px;
}

.kc-signup-slug[b-n2qbnk0xc7] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-md);
    background: var(--kc-bg-elevated);
    overflow: hidden;
    transition: border-color var(--kc-duration-fast) var(--reveal-ease),
                box-shadow var(--kc-duration-fast) var(--reveal-ease);
}
.kc-signup-slug:focus-within[b-n2qbnk0xc7] {
    border-color: var(--kc-color-emerald);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}
.kc-signup-slug-prefix[b-n2qbnk0xc7] {
    padding: 12px 14px;
    background: var(--kc-bg-muted);
    color: var(--kc-fg-muted);
    font-family: var(--kc-font-mono);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    border-right: 1px solid var(--kc-border);
    white-space: nowrap;
    display: flex; align-items: center;
}
.kc-signup-slug[b-n2qbnk0xc7]  input {
    border: 0; border-radius: 0; box-shadow: none !important;
    flex: 1;
    padding-left: 14px;
}
.kc-signup-slug[b-n2qbnk0xc7]  input:focus { box-shadow: none !important; background: var(--kc-bg-elevated) !important; }

.kc-signup-error[b-n2qbnk0xc7] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: var(--kc-radius-md);
    background: rgba(239, 68, 68, 0.08);
    color: var(--kc-color-danger);
    border: 1px solid rgba(239, 68, 68, 0.18);
    font-size: 13px;
}
.kc-signup-error i[b-n2qbnk0xc7] { font-size: 14px; flex-shrink: 0; }

.kc-signup-submit[b-n2qbnk0xc7] {
    margin-top: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 24px;
    border: 0;
    border-radius: var(--kc-radius-pill);
    background: var(--kc-color-ink);
    color: var(--kc-color-bone);
    font-family: var(--kc-font-sans);
    font-size: 14.5px;
    font-weight: var(--kc-weight-semibold);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(11, 20, 16, 0.25);
    transition: transform var(--kc-duration-fast) var(--reveal-ease),
                box-shadow var(--kc-duration-fast) var(--reveal-ease);
    animation: kc-fade-up-b-n2qbnk0xc7 600ms 760ms var(--reveal-ease) both;
}
.kc-signup-submit:hover:not(:disabled)[b-n2qbnk0xc7] {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(11, 20, 16, 0.32),
                inset 0 0 0 1px var(--kc-color-lime);
}
.kc-signup-submit:disabled[b-n2qbnk0xc7] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.kc-signup-submit i[b-n2qbnk0xc7] { font-size: 12px; opacity: 0.85; }

.kc-signup-already[b-n2qbnk0xc7] {
    margin: 18px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--kc-fg-muted);
    text-align: center;
    animation: kc-fade-up-b-n2qbnk0xc7 600ms 880ms var(--reveal-ease) both;
}
.kc-signup-link[b-n2qbnk0xc7] {
    color: var(--kc-color-emerald);
    font-weight: var(--kc-weight-semibold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--kc-duration-fast) var(--reveal-ease);
}
.kc-signup-link:hover[b-n2qbnk0xc7] { border-bottom-color: var(--kc-color-emerald); }

.kc-signup-footer[b-n2qbnk0xc7] {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--kc-border);
    animation: kc-fade-up-b-n2qbnk0xc7 600ms 950ms var(--reveal-ease) both;
}

/* Animations (mirror Login keyframes — components are independent so we redeclare). */
@keyframes kc-fade-up-b-n2qbnk0xc7 {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes kc-tilt-in-b-n2qbnk0xc7 {
    from { opacity: 0; transform: translateY(20px) rotate(-2.5deg); }
    to   { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes kc-pop-b-n2qbnk0xc7 {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes kc-slide-r-b-n2qbnk0xc7 {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes kc-glow-drift-b-n2qbnk0xc7 {
    from { opacity: 0; transform: translate(40px, 60px) scale(0.85); }
    to   { opacity: 1; transform: translate(0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .kc-signup *[b-n2qbnk0xc7], .kc-signup *[b-n2qbnk0xc7]::before, .kc-signup *[b-n2qbnk0xc7]::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }
}

@media (max-width: 1024px) {
    .kc-signup[b-n2qbnk0xc7] { grid-template-columns: 1fr; }
    .kc-signup-hero[b-n2qbnk0xc7] { padding: 40px 32px; min-height: 360px; }
    .kc-signup-display[b-n2qbnk0xc7] { font-size: clamp(40px, 8vw, 64px); }
    .kc-signup-pane[b-n2qbnk0xc7] { padding: 32px 24px; }
    .kc-signup-row[b-n2qbnk0xc7] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .kc-signup-hero[b-n2qbnk0xc7] { display: none; }
    .kc-signup-mobile-mark[b-n2qbnk0xc7] { display: block; margin-bottom: 8px; }
    .kc-signup-pane[b-n2qbnk0xc7] { padding: 24px 20px; min-height: 100vh; }
    .kc-signup-h2[b-n2qbnk0xc7] { font-size: 26px; }
}
/* /Components/Shared/KcToast.razor.rz.scp.css */
/* =============================================================================
   KcToast — standard error/notification toast del brand kit konecia.

   Layout pattern: leading-icon column + body column (estándar Linear/Stripe/Vercel).
   El icono actúa como ancla visual del card y la banda izquierda de 3px refuerza
   la variante para identificación periférica.

   Tokens: kc-* únicamente. Cero hex hardcodeado — automáticamente coherente con
   light + dark mode via data-theme.
   ============================================================================= */

.kc-toast-region[b-ydu9yept1p] {
    position: fixed;
    bottom: max(var(--kc-space-6), env(safe-area-inset-bottom));
    right: max(var(--kc-space-6), env(safe-area-inset-right));
    z-index: 9999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: var(--kc-space-3);
    max-width: 440px;
}

.kc-toast[b-ydu9yept1p] {
    pointer-events: auto;
    background: var(--kc-bg-elevated);
    border: 1px solid var(--kc-border);
    border-left-width: 3px;
    border-radius: var(--kc-radius-lg);
    box-shadow: var(--kc-shadow-lg);
    padding: var(--kc-space-5);

    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--kc-space-4);
    align-items: start;

    font-family: var(--kc-font-sans);
    animation: kc-toast-in-b-ydu9yept1p var(--kc-duration-base) var(--kc-ease-emphasis) both;
    max-height: calc(100vh - var(--kc-space-12));
    overflow: hidden;
}

/* ── Variants ──────────────────────────────────────────────────────────────── */
.kc-toast[data-variant="error"][b-ydu9yept1p]   { border-left-color: var(--kc-color-danger); }
.kc-toast[data-variant="warning"][b-ydu9yept1p] { border-left-color: var(--kc-color-warning); }
.kc-toast[data-variant="success"][b-ydu9yept1p] { border-left-color: var(--kc-color-emerald); }
.kc-toast[data-variant="info"][b-ydu9yept1p]    { border-left-color: var(--kc-color-info); }

/* ── Leading icon column ───────────────────────────────────────────────────── */
.kc-toast__icon[b-ydu9yept1p] {
    width: 36px;
    height: 36px;
    border-radius: var(--kc-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    /* Subtle tinted background — refuerza la variante sin gritar. La transparencia
       canónica del token mantiene legibilidad en light + dark mode. */
}
.kc-toast[data-variant="error"]   .kc-toast__icon[b-ydu9yept1p] { background: var(--kc-color-danger-soft);  color: var(--kc-color-danger); }
.kc-toast[data-variant="warning"] .kc-toast__icon[b-ydu9yept1p] { background: var(--kc-color-warning-soft); color: var(--kc-color-warning); }
.kc-toast[data-variant="success"] .kc-toast__icon[b-ydu9yept1p] { background: var(--kc-color-success-soft); color: var(--kc-color-emerald); }
.kc-toast[data-variant="info"]    .kc-toast__icon[b-ydu9yept1p] { background: var(--kc-color-info-soft);    color: var(--kc-color-info); }

/* ── Body column ───────────────────────────────────────────────────────────── */
.kc-toast__body[b-ydu9yept1p] {
    display: flex;
    flex-direction: column;
    gap: var(--kc-space-2);
    min-width: 0; /* permite que el texto haga wrap dentro del grid */
}

.kc-toast__head[b-ydu9yept1p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kc-space-3);
    min-height: 18px;
}

.kc-toast__eyebrow[b-ydu9yept1p] {
    font-family: var(--kc-font-mono);
    font-size: var(--kc-text-xs);
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    font-weight: var(--kc-weight-medium);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kc-toast[data-variant="error"]   .kc-toast__eyebrow[b-ydu9yept1p] { color: var(--kc-color-danger); }
.kc-toast[data-variant="warning"] .kc-toast__eyebrow[b-ydu9yept1p] { color: var(--kc-color-warning); }
.kc-toast[data-variant="success"] .kc-toast__eyebrow[b-ydu9yept1p] { color: var(--kc-color-emerald); }
.kc-toast[data-variant="info"]    .kc-toast__eyebrow[b-ydu9yept1p] { color: var(--kc-color-info); }

.kc-toast__close[b-ydu9yept1p] {
    background: transparent;
    border: 0;
    padding: 4px;
    margin: -4px;
    cursor: pointer;
    color: var(--kc-fg-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--kc-radius-sm);
    transition: color var(--kc-duration-fast) var(--kc-ease-standard),
                background-color var(--kc-duration-fast) var(--kc-ease-standard);
    flex-shrink: 0;
}
.kc-toast__close:hover[b-ydu9yept1p] {
    color: var(--kc-fg);
    background-color: var(--kc-bg-muted);
}
.kc-toast__close:focus-visible[b-ydu9yept1p] {
    outline: 2px solid var(--kc-focus-ring);
    outline-offset: 2px;
}

/* ── Title — Geist semibold, accionable ────────────────────────────────────── */
.kc-toast__title[b-ydu9yept1p] {
    margin: 0;
    font-size: var(--kc-text-md);
    font-weight: var(--kc-weight-semibold);
    letter-spacing: var(--kc-tracking-tight);
    line-height: var(--kc-leading-snug);
    color: var(--kc-fg);
}

/* ── Message — Geist regular, muted ────────────────────────────────────────── */
.kc-toast__message[b-ydu9yept1p] {
    margin: 0;
    font-size: var(--kc-text-sm);
    line-height: var(--kc-leading-normal);
    color: var(--kc-fg-muted);
}

/* ── Details expandible — para devs ────────────────────────────────────────── */
.kc-toast__details[b-ydu9yept1p] { margin-top: var(--kc-space-2); }

.kc-toast__details summary[b-ydu9yept1p] {
    list-style: none;
    cursor: pointer;
    font-family: var(--kc-font-mono);
    font-size: var(--kc-text-xs);
    letter-spacing: var(--kc-tracking-mono);
    text-transform: uppercase;
    color: var(--kc-fg-subtle);
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: var(--kc-space-2);
    padding: 2px 0;
    border-radius: var(--kc-radius-sm);
    transition: color var(--kc-duration-fast) var(--kc-ease-standard);
}
.kc-toast__details summary[b-ydu9yept1p]::-webkit-details-marker { display: none; }
.kc-toast__details summary[b-ydu9yept1p]::marker { content: ""; }
.kc-toast__details summary[b-ydu9yept1p]::before {
    content: "";
    width: 0; height: 0;
    border-left: 4px solid currentColor;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transition: transform var(--kc-duration-fast) var(--kc-ease-standard);
}
.kc-toast__details[open] summary[b-ydu9yept1p]::before { transform: rotate(90deg); }
.kc-toast__details summary:hover[b-ydu9yept1p] { color: var(--kc-fg-muted); }
.kc-toast__details summary:focus-visible[b-ydu9yept1p] {
    outline: 2px solid var(--kc-focus-ring);
    outline-offset: 2px;
}

.kc-toast__details-body[b-ydu9yept1p] {
    margin: var(--kc-space-2) 0 0 0;
    padding: var(--kc-space-3);
    background: var(--kc-bg-muted);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-sm);
    font-family: var(--kc-font-mono);
    font-size: 11px;
    line-height: 1.45;
    color: var(--kc-fg-muted);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 180px;
    overflow-y: auto;
}

/* ── Entrance animation ────────────────────────────────────────────────────── */
@keyframes kc-toast-in-b-ydu9yept1p {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .kc-toast[b-ydu9yept1p] { animation: none; }
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .kc-toast-region[b-ydu9yept1p] {
        left: var(--kc-space-3);
        right: var(--kc-space-3);
        bottom: max(var(--kc-space-3), env(safe-area-inset-bottom));
        max-width: none;
    }
    .kc-toast[b-ydu9yept1p] { padding: var(--kc-space-4); gap: var(--kc-space-3); }
    .kc-toast__icon[b-ydu9yept1p] { width: 32px; height: 32px; font-size: 16px; }
}