/* =========================================================
   CAROBRA OPERATIONS · DESIGN SYSTEM 2026
   Capa visual global cargada después de los estilos de vista.
========================================================= */

:root {
    --sidebar-width: 264px;
    --sidebar-collapsed-width: 76px;
    --topbar-height: 68px;
    --content-max: 1540px;

    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius-md: 13px;
    --radius-lg: 17px;
    --radius-xl: 22px;

    --motion-in: cubic-bezier(0, .4, 0, 1);
    --motion-ui: cubic-bezier(.2, .8, .2, 1);
    --motion-out: cubic-bezier(.4, 0, 1, 1);
    --motion-calm: cubic-bezier(.22, 1, .36, 1);
    --motion-calm-inout: cubic-bezier(.65, 0, .35, 1);
    --ease-standard: var(--motion-calm-inout);
    --ease-spring: var(--motion-calm);
    --transition-fast: 150ms;
    --transition-normal: 240ms;
    --transition-slow: 380ms;

    --primary-solid: #3563d8;
    --primary-solid-hover: #2c54bd;
    --on-primary: #ffffff;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #101722;
    --bg-elevated: #141d2a;
    --surface: #182230;
    --surface-2: #202b3a;
    --surface-3: #293648;
    --sidebar-bg: rgba(17,25,37,.97);
    --topbar-bg: rgba(16,23,34,.91);
    --text: #f6f8fc;
    --text-soft: #d1d9e5;
    --muted: #9aa9bd;
    --border: rgba(184,199,219,.16);
    --border-strong: rgba(184,199,219,.27);
    --hover: rgba(194,211,235,.08);
    --active: rgba(105,145,255,.20);
    --active-border: rgba(126,160,255,.30);
    --grid-line: rgba(126,160,255,.035);
    --primary: #7ea0ff;
    --primary-hover: #96b1ff;
    --primary-soft: rgba(126,160,255,.15);
    --success: #4ed6a0;
    --success-soft: rgba(78,214,160,.14);
    --warning: #f5c15d;
    --warning-soft: rgba(245,193,93,.14);
    --danger: #ff7b82;
    --danger-soft: rgba(255,123,130,.14);
    --info: #74a7ff;
    --info-soft: rgba(116,167,255,.14);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.20),0 10px 28px rgba(0,0,0,.16);
    --shadow-md: 0 20px 52px rgba(0,0,0,.28);
    --shadow-lg: 0 34px 90px rgba(0,0,0,.40);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #e9eef5;
    --bg-elevated: #e3e9f1;
    --surface: #fcfdff;
    --surface-2: #f2f5f9;
    --surface-3: #e7edf4;
    --sidebar-bg: rgba(247,249,252,.97);
    --topbar-bg: rgba(247,249,252,.92);
    --text: #172033;
    --text-soft: #3f4d62;
    --muted: #66758a;
    --border: rgba(39,55,77,.14);
    --border-strong: rgba(39,55,77,.24);
    --hover: rgba(39,65,105,.07);
    --active: rgba(53,104,232,.13);
    --active-border: rgba(53,104,232,.22);
    --grid-line: rgba(53,104,232,.04);
    --primary: #2f63df;
    --primary-hover: #2453bf;
    --primary-soft: rgba(47,99,223,.12);
    --primary-solid: #2f5fcf;
    --primary-solid-hover: #244cac;
    --success: #087f5b;
    --success-soft: rgba(8,127,91,.11);
    --warning: #9a6100;
    --warning-soft: rgba(154,97,0,.11);
    --danger: #bf3544;
    --danger-soft: rgba(191,53,68,.10);
    --info: #285fbf;
    --info-soft: rgba(40,95,191,.11);
    --shadow-sm: 0 1px 2px rgba(23,32,51,.06),0 10px 26px rgba(23,32,51,.07);
    --shadow-md: 0 20px 50px rgba(23,32,51,.12);
    --shadow-lg: 0 34px 90px rgba(23,32,51,.18);
}

html { scroll-behavior: smooth; }

body {
    background:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),
        var(--bg);
    background-size: 32px 32px;
}

button, a, input, select, textarea { transition-timing-function: var(--motion-ui); }

:where(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* APP CHROME */
.sidebar {
    background: var(--sidebar-bg);
    border-right-color: var(--border-strong);
    box-shadow: 8px 0 30px rgba(17,32,54,.06);
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
}

.sidebar-header {
    flex-basis: 72px;
    justify-content: flex-start;
    padding: 13px 14px;
}

.sidebar-brand-mark {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(145deg, #6c91ff, #315ee4);
    box-shadow: 0 10px 30px rgba(49,94,228,.26), inset 0 1px rgba(255,255,255,.18);
}

.sidebar-brand-mark svg { width: 21px; height: 21px; }
.sidebar-brand-copy strong { font-size: 13px; letter-spacing: .12em; }
.sidebar-brand-copy small { font-size: 10px; }

.sidebar-user {
    margin: 13px 10px 3px;
    padding: 10px;
    border-radius: 12px;
    background: transparent;
}

.sidebar-user-avatar, .user-avatar, .user-dropdown-avatar {
    border: 1px solid rgba(79,124,255,.18);
    background: linear-gradient(145deg, rgba(79,124,255,.20), rgba(79,124,255,.08));
}

.avatar-image {
    width:100%;
    height:100%;
    display:block;
    border-radius:inherit;
    object-fit:cover;
}

.sidebar-nav { padding: 7px 8px 16px; }
.nav-section { margin-top: 17px; }
.nav-section-title { margin: 0 12px 7px; font-size: 10px; letter-spacing: .12em; }

.nav-link {
    min-height: 42px;
    gap: 10px;
    margin: 2px 0;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 12px;
}

.nav-link::before { left: 4px; width: 2px; border-radius: 4px; }
.nav-link.is-active { background: var(--active); border-color: var(--active-border); box-shadow:inset 0 0 0 1px var(--active-border); }
.nav-link.is-active::before { height: 18px; }
.nav-icon { flex-basis: 20px; width: 20px; height: 20px; }
.nav-icon svg { width: 18px; height: 18px; }
.nav-coming { font-size: 9px; }

.topbar {
    min-height: var(--topbar-height);
    padding: 9px clamp(18px,2.3vw,36px);
    background: var(--topbar-bg);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 7px 24px rgba(17,32,54,.045);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.topbar-heading { gap: 2px; }
.topbar-breadcrumb { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.topbar-title { font-size: clamp(16px,1.5vw,20px); font-weight: 690; }
.topbar-icon-button, .topbar-search { height: 38px; border-radius: 9px; box-shadow: none; }
.topbar-icon-button { width: 38px; }
.mobile-menu-toggle { display: grid; }
.topbar-search { min-width: 180px; background: var(--surface); }
.user-menu-toggle { border-radius: 10px; }
.user-dropdown { border-radius: 14px; box-shadow: var(--shadow-lg); }

.app-content {
    padding: 24px clamp(18px,2.5vw,40px) 54px;
}

/* Navegación compacta: un solo control hamburguesa en la barra superior. */
html.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding-inline: 8px;
}

html.sidebar-collapsed .sidebar-brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

html.sidebar-collapsed .sidebar-user {
    margin: 10px 8px 4px;
    padding: 5px;
    border-color: transparent;
    background: transparent;
}

html.sidebar-collapsed .sidebar-user-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 10px;
    font-size: 12px;
}

html.sidebar-collapsed .sidebar-nav { padding-inline: 8px; }

html.sidebar-collapsed .nav-link {
    width: 42px;
    height: 42px;
    min-height: 42px;
    margin: 3px auto;
    padding: 0;
    border-radius: 10px;
}

html.sidebar-collapsed .sidebar-footer { padding: 8px; }

.page-transition { animation: system-page-in 560ms var(--motion-calm) both; }

/* PAGE FOUNDATION */
:is(.dashboard-page,.user-dashboard,.tickets-page,.ticket-detail-page,.import-page,.profile-page,.users-page,.user-editor-page) {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
}

:is(.dashboard-hero,.user-welcome) {
    min-height: 190px;
    padding: clamp(26px,4vw,42px);
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        radial-gradient(circle at 90% 0, rgba(79,124,255,.14), transparent 34%),
        linear-gradient(135deg, var(--surface), var(--surface-2));
    box-shadow: none;
    overflow: hidden;
    isolation: isolate;
}

:is(.dashboard-hero,.user-welcome)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg,var(--primary),transparent 70%);
}

:is(.dashboard-hero-copy,.user-welcome-copy) h2 {
    font-size: clamp(28px,3.4vw,43px);
    font-weight: 720;
    letter-spacing: -.045em;
}

:is(.dashboard-hero-copy,.user-welcome-copy) p {
    max-width: 740px;
    font-size: 13px;
    line-height: 1.7;
}

:is(.dashboard-eyebrow,.user-welcome-status) {
    font-size: 10px;
    letter-spacing: .11em;
}

:is(.dashboard-hero-role,.user-role-card) {
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: rgba(79,124,255,.075);
    box-shadow: none;
}

/* KPI SYSTEM */
:is(.dashboard-kpis,.user-stats,.ticket-stats) {
    gap: 12px;
}

:is(.dashboard-kpi,.user-stat,.ticket-stat) {
    min-height: 104px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 150ms var(--motion-ui), border-color 150ms ease, box-shadow 150ms ease;
}

:is(.dashboard-kpi,.user-stat,.ticket-stat):hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

:is(.dashboard-kpi-icon,.user-stat-icon,.ticket-stat-icon) {
    border: 1px solid rgba(79,124,255,.12);
    border-radius: 10px;
}

:is(.dashboard-kpi-label,.user-stat-label,.ticket-stat-copy span) {
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

:is(.dashboard-kpi-value,.user-stat-value,.ticket-stat-copy strong) {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.04em;
}

/* PANELS */
:is(.dashboard-panel,.user-panel,.tickets-panel,.card,.profile-card) {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

:is(.dashboard-panel-header,.user-panel-header,.tickets-panel-head,.profile-card-head) {
    min-height: 66px;
    padding: 16px 19px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb,var(--surface) 78%,var(--surface-2));
}

:is(.dashboard-panel-title,.user-panel-title,.profile-card-title) h3 {
    font-size: 13px;
    font-weight: 690;
    letter-spacing: -.015em;
}

:is(.dashboard-grid,.user-dashboard-grid) {
    gap: 16px;
    margin-top: 16px;
}

:is(.dashboard-column,.user-dashboard-column) { gap: 16px; }

:is(.attention-item,.sla-status-row,.priority-card,.sla-summary-item) {
    border-radius: 11px;
    background: var(--surface-2);
}

:is(.dashboard-panel-link,.user-panel-action) {
    border-radius: 8px;
    font-size: 10px;
}

:is(.quick-action,.user-quick-action) {
    border-radius: 11px;
    background: var(--surface-2);
    transition: transform 140ms var(--motion-ui), border-color 140ms ease, background 140ms ease;
}

:is(.quick-action,.user-quick-action):hover {
    border-color: rgba(79,124,255,.30);
    background: var(--primary-soft);
    transform: translateX(3px);
}

/* TICKETS */
.tickets-heading { margin-bottom: 22px; }
.tickets-heading-copy h2 { font-size: clamp(28px,3vw,40px); font-weight: 720; }
.tickets-heading-copy p { font-size: 12px; }
.tickets-heading-count { border-radius: 9px; font-size: 10px; }

.tickets-toolbar {
    padding: 10px;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.tickets-input, .tickets-select, .tickets-filter-button, .tickets-clear {
    height: 40px;
    border-radius: 9px;
    font-size: 11px;
}

.tickets-panel { border-radius: 15px; box-shadow:var(--shadow-sm); }
.tickets-table th { font-size: 9px; letter-spacing: .07em; }
.tickets-table td { font-size: 11px; }
.tickets-table tbody tr { transition: background 100ms ease, transform 100ms ease; }
.tickets-table tbody tr:hover { background: var(--hover); }
.ticket-open { border-radius: 8px; }

/* FORM CONTROLS */
:where(.app-content,.auth-layout) input:not([type="checkbox"]):not([type="radio"]),
:where(.app-content,.auth-layout) select,
:where(.app-content,.auth-layout) textarea {
    accent-color: var(--primary);
}

:where(.app-content,.auth-layout) input:not([type="checkbox"]):not([type="radio"]):focus,
:where(.app-content,.auth-layout) select:focus,
:where(.app-content,.auth-layout) textarea:focus {
    border-color: rgba(79,124,255,.72);
    box-shadow: 0 0 0 4px rgba(79,124,255,.10);
}

/* IMPORT */
.import-page { max-width: 1120px; }
.import-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:22px; }
.import-heading-copy { max-width:720px; }
.import-eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:9px; color:var(--primary); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.import-eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 5px var(--primary-soft); }
.import-heading h2 { margin:0; font-size:clamp(28px,3.2vw,40px); font-weight:720; letter-spacing:-.045em; }
.import-heading p { margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.65; }
.import-card { overflow:hidden; }
.import-card-body { padding:24px; }
.upload-zone { position:relative; min-height:250px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; text-align:center; border:1px dashed var(--border-strong); border-radius:14px; background:var(--surface-2); overflow:hidden; transition:border-color 160ms ease,background 160ms ease,transform 160ms var(--motion-ui); }
.upload-zone::before { content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(79,124,255,.11),transparent 68%); opacity:0; transform:scale(.75); transition:opacity 220ms ease,transform 350ms var(--motion-in); }
.upload-zone:hover,.upload-zone.is-dragging { border-color:rgba(79,124,255,.55); background:rgba(79,124,255,.045); }
.upload-zone:hover::before,.upload-zone.is-dragging::before { opacity:1; transform:scale(1); }
.upload-icon { position:relative; width:50px; height:50px; display:grid; place-items:center; border:1px solid rgba(79,124,255,.18); border-radius:14px; background:var(--primary-soft); color:var(--primary); }
.upload-icon svg { width:23px; height:23px; }
.upload-title { position:relative; font-size:14px; font-weight:680; }
.upload-text,.upload-file-name { position:relative; color:var(--muted); font-size:11px; }
.file-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.import-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:18px; }
.system-button { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 15px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--text-soft); font-size:11px; font-weight:680; cursor:pointer; transition:transform 120ms var(--motion-ui),border-color 120ms ease,background 120ms ease,box-shadow 120ms ease; }
.system-button:hover { border-color:var(--border-strong); background:var(--hover); transform:translateY(-1px); }
.system-button-primary { border-color:transparent; background:var(--primary-solid); color:var(--on-primary); }
.system-button-primary:hover { border-color:transparent; background:var(--primary-solid-hover); box-shadow:0 10px 24px rgba(38,79,178,.24); }
.tickets-filter-button,.ticket-followup-submit,.assignment-save,.management-save,.pagination-current { background:var(--primary-solid); color:var(--on-primary); }
.tickets-filter-button:hover,.ticket-followup-submit:hover,.assignment-save:hover,.management-save:hover { background:var(--primary-solid-hover); }
.system-button:active { transform:scale(.98); }
.system-button:disabled { opacity:.55; cursor:wait; transform:none; }
.import-results { margin-top:18px; overflow:hidden; }
.import-results-head { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 20px; border-bottom:1px solid var(--border); }
.import-results-title { font-size:14px; font-weight:700; }
.import-results-file { margin-top:4px; color:var(--muted); font-size:10px; }
.import-status { padding:6px 9px; border-radius:8px; background:var(--success-soft); color:var(--success); font-size:10px; font-weight:750; }
.import-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--border); }
.import-stat { padding:20px; border-right:1px solid var(--border); }
.import-stat:last-child { border-right:0; }
.import-stat span { display:block; color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.07em; }
.import-stat strong { display:block; margin-top:8px; font-size:25px; letter-spacing:-.04em; }
.import-preview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:20px; }
.import-preview-box { min-height:120px; padding:16px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }
.import-preview-title { margin-bottom:11px; color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.import-chip { display:inline-flex; margin:3px; padding:6px 8px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text-soft); font-size:10px; }
.import-result-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-top:1px solid var(--border); background:var(--surface-2); color:var(--muted); font-size:11px; }
.import-empty { color:var(--muted); font-size:10px; }

/* PROFILE */
.profile-page { max-width:1180px; }

.profile-hero {
    position:relative;
    min-height:196px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:34px;
    padding:34px 36px;
    border:1px solid var(--border);
    border-radius:20px;
    background:
        radial-gradient(circle at 82% 16%,rgba(79,124,255,.14),transparent 27%),
        linear-gradient(135deg,var(--surface),var(--surface-2));
    overflow:hidden;
    isolation:isolate;
}

.profile-hero::before {
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:2px;
    background:linear-gradient(90deg,var(--primary),rgba(111,81,224,.7),transparent 72%);
}

.profile-hero-motion { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.profile-orbit { position:absolute; border:1px solid rgba(79,124,255,.13); border-radius:50%; }
.profile-orbit-one { width:380px; height:380px; right:-120px; top:-218px; animation:profile-orbit-drift 18s ease-in-out infinite alternate; }
.profile-orbit-two { width:220px; height:220px; right:84px; bottom:-174px; animation:profile-orbit-drift 22s -5s ease-in-out infinite alternate-reverse; }
.profile-pulse { position:absolute; width:210px; height:210px; right:9%; top:-60px; border-radius:50%; background:rgba(79,124,255,.10); filter:blur(48px); animation:profile-ambient-pulse 10s ease-in-out infinite; }

.profile-identity { position:relative; display:flex; align-items:center; gap:20px; min-width:0; }
.profile-avatar { position:relative; flex:0 0 76px; width:76px; height:76px; display:grid; place-items:center; border:1px solid rgba(79,124,255,.28); border-radius:22px; background:linear-gradient(145deg,rgba(79,124,255,.22),rgba(79,124,255,.08)); color:var(--primary); box-shadow:0 14px 36px rgba(49,94,228,.12),inset 0 1px rgba(255,255,255,.08); font-size:27px; font-weight:780; }
.profile-avatar-status { position:absolute; right:-3px; bottom:-3px; width:17px; height:17px; border:4px solid var(--surface); border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(35,196,131,.10); animation:profile-status-breathe 4s ease-in-out infinite; }
.profile-copy { min-width:0; }
.profile-copy > span { color:var(--primary); font-size:10px; font-weight:780; letter-spacing:.12em; text-transform:uppercase; }
.profile-copy h2 { margin:8px 0 0; font-size:clamp(27px,3vw,39px); font-weight:720; letter-spacing:-.045em; line-height:1.05; }
.profile-copy p { max-width:570px; margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }

.profile-completion { position:relative; flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:12px 15px 12px 12px; border:1px solid var(--border); border-radius:15px; background:rgba(255,255,255,.025); backdrop-filter:blur(12px); }
.profile-progress-ring { width:54px; height:54px; display:grid; place-items:center; padding:4px; border-radius:50%; background:conic-gradient(var(--primary) calc(var(--profile-progress) * 1%),var(--surface-3) 0); transform:rotate(-90deg); }
.profile-progress-ring > div { width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--surface); transform:rotate(90deg); }
.profile-progress-ring strong { font-size:14px; letter-spacing:-.04em; }
.profile-progress-ring span { margin-left:1px; color:var(--muted); font-size:7px; }
.profile-completion-copy strong,.profile-completion-copy span { display:block; white-space:nowrap; }
.profile-completion-copy strong { font-size:11px; }
.profile-completion-copy span { margin-top:4px; color:var(--muted); font-size:9px; }

.profile-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,.65fr); gap:16px; align-items:start; margin-top:16px; }
.profile-form,.profile-side-column { min-width:0; }
.profile-side-column { display:grid; gap:16px; }
.profile-card { overflow:hidden; box-shadow:var(--shadow-sm); }
.profile-card-head { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.profile-card-heading { display:flex; align-items:center; gap:11px; min-width:0; }
.profile-card-icon { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(79,124,255,.14); border-radius:10px; background:var(--primary-soft); color:var(--primary); }
.profile-card-icon svg { width:18px; height:18px; }
.profile-card-title { min-width:0; }
.profile-card-title h3 { margin:0; }
.profile-card-title p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.profile-form-state { flex:0 0 auto; padding:5px 8px; border-radius:7px; background:var(--surface-2); color:var(--muted); font-size:9px; font-weight:700; transition:color 220ms ease,background 220ms ease; }
.profile-form.is-dirty .profile-form-state { background:var(--primary-soft); color:var(--primary); }
.profile-form.has-errors .profile-form-state { background:var(--danger-soft); color:var(--danger); }

.profile-form-alert { margin:18px 20px 0; padding:11px 13px; border:1px solid rgba(228,81,81,.20); border-radius:10px; background:var(--danger-soft); color:var(--danger); font-size:10px; }
.profile-form-alert .errorlist { margin:0; padding-left:16px; }
.profile-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px 16px; padding:22px 20px 25px; }
.profile-field-wide { grid-column:1 / -1; }
.profile-field label { display:block; margin-bottom:8px; color:var(--text-soft); font-size:10px; font-weight:680; }
.profile-field label span { color:var(--primary); }
.profile-input-wrap { position:relative; }
.profile-input-wrap > svg { position:absolute; z-index:1; left:13px; top:50%; width:17px; height:17px; color:var(--muted); transform:translateY(-50%); pointer-events:none; transition:color 220ms ease,transform 320ms var(--motion-calm); }
.profile-input-wrap:focus-within > svg { color:var(--primary); transform:translateY(-50%) scale(1.07); }
.profile-input { width:100%; height:47px; padding:0 13px 0 40px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface-2); color:var(--text); outline:none; font:inherit; font-size:12px; transition:border-color 220ms ease,background 220ms ease,box-shadow 280ms ease,transform 280ms var(--motion-calm); }
.profile-input::placeholder { color:var(--muted); opacity:.68; }
.profile-input:hover { border-color:rgba(79,124,255,.30); background:var(--surface); }
.profile-input:focus { border-color:rgba(79,124,255,.70); background:var(--surface); box-shadow:0 0 0 4px rgba(79,124,255,.09); transform:translateY(-1px); }
.profile-field-help { margin:7px 2px 0; color:var(--muted); font-size:10px; line-height:1.5; }
.profile-field-error { margin:7px 2px 0; color:var(--danger); font-size:10px; line-height:1.45; }
.profile-field.has-error .profile-input { border-color:rgba(228,81,81,.58); box-shadow:0 0 0 3px rgba(228,81,81,.07); }
.profile-fields-divider { display:flex; align-items:center; gap:10px; margin:1px 0 -1px; color:var(--muted); font-size:9px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.profile-fields-divider::after { content:""; flex:1; height:1px; background:var(--border); }

/* AVATAR EDITOR */
.photo-editor { display:flex; align-items:center; gap:17px; min-height:100px; padding:15px; border:1px solid var(--border); border-radius:13px; background:linear-gradient(135deg,var(--surface-2),var(--surface)); transition:border-color 240ms ease,box-shadow 280ms ease,transform 320ms var(--motion-calm); }
.photo-editor:focus-within { border-color:rgba(79,124,255,.42); box-shadow:0 0 0 4px rgba(79,124,255,.07); transform:translateY(-1px); }
.photo-editor.has-error { border-color:rgba(228,81,81,.56); }
.photo-editor-preview { position:relative; flex:0 0 72px; width:72px; height:72px; display:grid; place-items:center; border:1px solid rgba(79,124,255,.23); border-radius:20px; background:linear-gradient(145deg,rgba(79,124,255,.20),rgba(79,124,255,.07)); color:var(--primary); box-shadow:0 10px 26px rgba(49,94,228,.12); overflow:visible; font-size:24px; font-weight:780; }
.photo-editor-preview img { width:100%; height:100%; display:block; border-radius:19px; object-fit:cover; }
.photo-editor-preview [hidden] { display:none!important; }
.photo-editor-preview > i { position:absolute; right:-3px; bottom:-3px; width:15px; height:15px; border:4px solid var(--surface); border-radius:50%; background:var(--success); }
.photo-editor-content { flex:1; min-width:0; }
.photo-editor-content > div:first-child strong,.photo-editor-content > div:first-child span { display:block; }
.photo-editor-content > div:first-child strong { color:var(--text); font-size:11px; }
.photo-editor-content > div:first-child span { margin-top:4px; color:var(--muted); font-size:9px; }
.photo-editor-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:11px; }
.photo-editor-upload,.photo-editor-remove { min-height:31px; display:inline-flex!important; align-items:center; justify-content:center; gap:6px; margin:0!important; padding:6px 10px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--text-soft)!important; cursor:pointer; font-size:9px!important; font-weight:720!important; transition:border-color 180ms ease,color 180ms ease,background 180ms ease,transform 240ms var(--motion-calm); }
.photo-editor-upload:hover { border-color:rgba(79,124,255,.38); background:var(--primary-soft); color:var(--primary)!important; transform:translateY(-1px); }
.photo-editor-upload svg { width:14px; height:14px; }
.profile-photo-input,.user-photo-input,.profile-photo-remove-input,.user-photo-remove-input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; opacity:0; }
.photo-editor-upload:has(+ input:focus-visible),.photo-editor-remove:has(input:focus-visible) { outline:2px solid var(--primary); outline-offset:2px; }
.photo-editor-remove { color:var(--muted)!important; }
.photo-editor-upload span,.photo-editor-remove span { color:inherit!important; }
.photo-editor-remove:has(input:checked) { border-color:rgba(228,81,81,.28); background:var(--danger-soft); color:var(--danger)!important; }
.photo-editor-content > small { display:block; margin-top:8px; overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.photo-editor-error { margin:7px 0 0; color:var(--danger); font-size:9px; }

.profile-form-footer { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 20px; border-top:1px solid var(--border); background:var(--surface-2); }
.profile-save-note { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; line-height:1.5; }
.profile-save-dot { flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:var(--muted); transition:background 220ms ease,box-shadow 220ms ease; }
.profile-form.is-dirty .profile-save-dot { background:var(--primary); box-shadow:0 0 0 4px rgba(79,124,255,.10); }
.profile-save-button { flex:0 0 auto; min-width:148px; gap:8px; }
.profile-save-button svg { width:16px; height:16px; transition:transform 360ms var(--motion-calm); }
.profile-save-button:hover svg { transform:translateY(-1px) scale(1.05); }
.profile-save-button.is-loading { opacity:.70; cursor:wait; pointer-events:none; }

.profile-account-list { padding:6px 20px; }
.profile-account-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:49px; border-bottom:1px solid var(--border); }
.profile-account-row:last-child { border-bottom:0; }
.profile-account-row > span { color:var(--muted); font-size:10px; }
.profile-account-row > strong { max-width:64%; overflow-wrap:anywhere; font-size:11px; text-align:right; }
.profile-status { display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; color:var(--danger); }
.profile-status i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.profile-status.is-active { color:var(--success); }
.profile-protected-note { display:flex; align-items:flex-start; gap:10px; margin:4px 14px 14px; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.profile-protected-note svg { flex:0 0 16px; width:16px; height:16px; color:var(--muted); }
.profile-protected-note p { margin:0; color:var(--muted); font-size:9px; line-height:1.55; }

.profile-integration-card { position:relative; display:flex; align-items:flex-start; gap:13px; padding:18px; background:linear-gradient(135deg,var(--surface),var(--surface-2)); }
.profile-integration-card::after { content:""; position:absolute; width:120px; height:120px; right:-65px; bottom:-75px; border:1px solid rgba(79,124,255,.12); border-radius:50%; }
.profile-integration-icon { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--border-strong); border-radius:11px; background:var(--surface-2); color:var(--text-soft); font-size:15px; font-weight:780; }
.profile-integration-copy { position:relative; z-index:1; min-width:0; }
.profile-integration-copy > div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.profile-integration-copy h3 { margin:0; font-size:11px; }
.profile-coming-badge { padding:4px 6px; border-radius:6px; background:var(--primary-soft); color:var(--primary); font-size:9px; font-weight:780; letter-spacing:.06em; text-transform:uppercase; }
.profile-integration-copy p { margin:9px 0 0; color:var(--muted); font-size:10px; line-height:1.65; }

/* USERS ADMINISTRATION */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.users-page,.user-editor-page { max-width:1320px; }
.users-heading { position:relative; min-height:138px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:26px 28px; border:1px solid var(--border); border-radius:18px; background:radial-gradient(circle at 88% 0,rgba(79,124,255,.13),transparent 32%),linear-gradient(135deg,var(--surface),var(--surface-2)); overflow:hidden; }
.users-heading::after { content:""; position:absolute; right:-65px; bottom:-150px; width:260px; height:260px; border:1px solid rgba(79,124,255,.12); border-radius:50%; pointer-events:none; animation:profile-orbit-drift 20s ease-in-out infinite alternate; }
.users-heading > div,.users-create-button { position:relative; z-index:1; }
.users-eyebrow { display:flex; align-items:center; gap:8px; color:var(--primary); font-size:10px; font-weight:780; letter-spacing:.11em; text-transform:uppercase; }
.users-eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 5px var(--success-soft); animation:profile-status-breathe 4s ease-in-out infinite; }
.users-heading h2 { margin:8px 0 0; font-size:clamp(25px,3vw,36px); letter-spacing:-.045em; }
.users-heading p { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.users-create-button svg { width:17px; height:17px; }

.users-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; }
.users-stat { min-height:88px; display:flex; align-items:center; gap:13px; padding:15px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm); }
.users-stat-icon { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--primary-soft); color:var(--primary); }
.users-stat-icon svg { width:19px; height:19px; }
.users-stat > div > span,.users-stat > div > strong { display:block; }
.users-stat > div > span { color:var(--muted); font-size:10px; font-weight:680; text-transform:uppercase; letter-spacing:.05em; }
.users-stat > div > strong { margin-top:4px; font-size:21px; letter-spacing:-.04em; }
.users-stat.is-success .users-stat-icon { background:var(--success-soft); color:var(--success); }
.users-stat.is-admin .users-stat-icon { background:rgba(130,102,255,.11); color:#8266ff; }
.users-stat.is-muted .users-stat-icon { background:var(--surface-3); color:var(--muted); }

.users-toolbar { display:flex; align-items:center; gap:9px; margin-top:14px; padding:11px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm); }
.users-search { position:relative; flex:1; min-width:220px; }
.users-search svg { position:absolute; left:12px; top:50%; width:16px; height:16px; color:var(--muted); transform:translateY(-50%); pointer-events:none; }
.users-toolbar input,.users-toolbar select { height:40px; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface-2); color:var(--text); outline:none; font-size:11px; transition:border-color 220ms ease,box-shadow 220ms ease,background 220ms ease; }
.users-toolbar input { width:100%; padding:0 13px 0 38px; }
.users-toolbar select { min-width:145px; padding:0 32px 0 11px; cursor:pointer; }
.users-toolbar input:focus,.users-toolbar select:focus { border-color:rgba(79,124,255,.62); background:var(--surface); box-shadow:0 0 0 4px rgba(79,124,255,.08); }
.users-clear-filter { padding:0 7px; color:var(--muted); font-size:10px; }
.users-clear-filter:hover { color:var(--text); }

.users-panel { margin-top:14px; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; }
.users-panel-head { min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 17px; border-bottom:1px solid var(--border); }
.users-panel-head > div strong,.users-panel-head > div span { display:block; }
.users-panel-head > div strong { font-size:12px; }
.users-panel-head > div span { margin-top:3px; color:var(--muted); font-size:10px; }
.users-sync-status { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:10px; }
.users-sync-status i { width:6px; height:6px; border-radius:50%; background:var(--success); }
.users-table-wrap { width:100%; overflow-x:auto; }
.users-table { width:100%; min-width:980px; border-collapse:collapse; }
.users-table th { height:41px; padding:0 13px; border-bottom:1px solid var(--border); background:var(--surface-2); color:var(--muted); font-size:9px; font-weight:780; letter-spacing:.07em; text-align:left; text-transform:uppercase; white-space:nowrap; }
.users-table td { height:66px; padding:9px 13px; border-bottom:1px solid var(--border); color:var(--text-soft); font-size:10px; vertical-align:middle; }
.users-table tbody tr { transition:background 180ms ease; }
.users-table tbody tr:hover { background:var(--hover); }
.users-table tbody tr:last-child td { border-bottom:0; }
.users-person { display:flex; align-items:center; gap:10px; min-width:250px; }
.users-avatar { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(79,124,255,.17); border-radius:10px; background:var(--primary-soft); color:var(--primary); font-size:11px; font-weight:780; }
.users-person > div,.users-corporate { min-width:0; }
.users-person strong,.users-person span,.users-corporate strong,.users-corporate span { display:block; }
.users-person strong,.users-corporate strong { max-width:250px; overflow:hidden; color:var(--text); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.users-person span,.users-corporate span { max-width:275px; margin-top:4px; overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.users-corporate { min-width:155px; }
.users-role,.users-status { display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:4px 7px; border-radius:7px; background:var(--surface-3); color:var(--text-soft); font-size:9px; font-weight:750; white-space:nowrap; }
.users-role.is-admin { background:rgba(130,102,255,.11); color:#8266ff; }
.users-status { background:var(--danger-soft); color:var(--danger); }
.users-status.is-active { background:var(--success-soft); color:var(--success); }
.users-status i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.users-last-login { color:var(--muted); font-size:9px; white-space:nowrap; }
.users-edit { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--border); border-radius:9px; color:var(--muted); transition:color 180ms ease,border-color 180ms ease,background 180ms ease,transform 220ms var(--motion-calm); }
.users-edit svg { width:15px; height:15px; }
.users-edit:hover { border-color:rgba(79,124,255,.30); background:var(--primary-soft); color:var(--primary); transform:translateY(-1px); }
.users-pagination { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 17px; border-top:1px solid var(--border); background:var(--surface-2); color:var(--muted); font-size:10px; }
.users-pagination > div { display:flex; gap:8px; }
.users-empty { min-height:260px; display:flex; align-items:center; flex-direction:column; justify-content:center; padding:28px; text-align:center; }
.users-empty > span { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--surface-2); color:var(--muted); }
.users-empty svg { width:21px; height:21px; }
.users-empty h3 { margin:14px 0 0; font-size:12px; }
.users-empty p { margin:6px 0 0; color:var(--muted); font-size:10px; }

/* USER EDITOR */
.user-editor-heading { display:flex; align-items:center; gap:15px; min-height:105px; padding:18px 21px; border:1px solid var(--border); border-radius:17px; background:linear-gradient(135deg,var(--surface),var(--surface-2)); }
.user-editor-back { flex:0 0 39px; width:39px; height:39px; display:grid; place-items:center; border:1px solid var(--border); border-radius:11px; color:var(--muted); transition:color 180ms ease,border-color 180ms ease,background 180ms ease,transform 240ms var(--motion-calm); }
.user-editor-back:hover { border-color:rgba(79,124,255,.30); background:var(--primary-soft); color:var(--primary); transform:translateX(-2px); }
.user-editor-back svg { width:18px; height:18px; }
.user-editor-heading > div > span { color:var(--primary); font-size:9px; font-weight:760; letter-spacing:.08em; text-transform:uppercase; }
.user-editor-heading h2 { margin:6px 0 0; font-size:clamp(22px,2.7vw,32px); letter-spacing:-.04em; }
.user-editor-heading p { margin:6px 0 0; color:var(--muted); font-size:11px; }
.user-editor-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(290px,.65fr); gap:15px; align-items:start; margin-top:15px; }
.user-editor-main,.user-editor-side { display:grid; gap:15px; min-width:0; }
.user-editor-card { border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; }
.user-editor-card > header { min-height:65px; display:flex; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid var(--border); }
.user-editor-card-icon { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--primary-soft); color:var(--primary); }
.user-editor-card-icon svg { width:18px; height:18px; }
.user-editor-card header h3 { margin:0; font-size:12px; }
.user-editor-card header p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.user-editor-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 15px; padding:21px 18px 24px; }
.user-admin-field.is-wide { grid-column:1 / -1; }
.user-admin-field label { display:block; margin-bottom:7px; color:var(--text-soft); font-size:10px; font-weight:680; }
.user-admin-field label span { color:var(--primary); }
.user-admin-input,.user-admin-select { width:100%; height:45px; padding:0 12px; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface-2); color:var(--text); outline:none; font:inherit; font-size:11px; transition:border-color 220ms ease,box-shadow 260ms ease,background 220ms ease,transform 260ms var(--motion-calm); }
.user-admin-input:focus,.user-admin-select:focus { border-color:rgba(79,124,255,.67); background:var(--surface); box-shadow:0 0 0 4px rgba(79,124,255,.08); transform:translateY(-1px); }
.user-admin-input:disabled { color:var(--muted); cursor:not-allowed; opacity:.75; }
.user-admin-help { margin:6px 1px 0; color:var(--muted); font-size:9px; line-height:1.5; }
.user-admin-error { margin:6px 1px 0; color:var(--danger); font-size:10px; line-height:1.5; }
.user-admin-field.has-error .user-admin-input,.user-admin-field.has-error .user-admin-select { border-color:rgba(228,81,81,.56); box-shadow:0 0 0 3px rgba(228,81,81,.07); }
.user-editor-alert { padding:12px 14px; border:1px solid rgba(228,81,81,.20); border-radius:11px; background:var(--danger-soft); color:var(--danger); font-size:9px; }
.user-editor-alert .errorlist { margin:0; padding-left:16px; }
.user-access-body { padding:20px 18px; }
.user-active-control { display:flex; align-items:center; gap:11px; margin-top:20px; padding:13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); cursor:pointer; }
.user-admin-checkbox { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.user-active-switch { flex:0 0 34px; width:34px; height:20px; padding:3px; border-radius:999px; background:var(--surface-3); transition:background 240ms ease; }
.user-active-switch i { display:block; width:14px; height:14px; border-radius:50%; background:var(--muted); transition:transform 320ms var(--motion-calm),background 220ms ease; }
.user-admin-checkbox:checked + .user-active-switch { background:rgba(35,196,131,.18); }
.user-admin-checkbox:checked + .user-active-switch i { background:var(--success); transform:translateX(14px); }
.user-admin-checkbox:focus-visible + .user-active-switch { outline:2px solid var(--primary); outline-offset:2px; }
.user-active-control > span:last-child strong,.user-active-control > span:last-child small { display:block; }
.user-active-control > span:last-child strong { font-size:10px; }
.user-active-control > span:last-child small { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.45; }
.user-active-control.has-error { border-color:rgba(228,81,81,.5); }
.user-editor-tip { display:flex; align-items:flex-start; gap:11px; padding:15px; border:1px solid rgba(79,124,255,.14); border-radius:13px; background:var(--primary-soft); }
.user-editor-tip > svg { flex:0 0 17px; width:17px; height:17px; color:var(--primary); }
.user-editor-tip strong { display:block; color:var(--primary); font-size:10px; }
.user-editor-tip p { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.6; }
.user-editor-actions { position:sticky; z-index:20; bottom:14px; min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:15px; padding:12px 15px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb,var(--surface) 90%,transparent); box-shadow:var(--shadow-md); backdrop-filter:blur(18px); }
.user-editor-actions > span { color:var(--muted); font-size:10px; transition:color 220ms ease; }
.user-editor-form.is-dirty .user-editor-actions > span { color:var(--primary); }
.user-editor-actions > div { display:flex; gap:8px; }
.user-editor-actions button svg { width:16px; height:16px; }
.user-editor-actions button.is-loading { opacity:.7; cursor:wait; pointer-events:none; }

/* AUTH */
.auth-layout {
    width: 100%;
    min-height: 100dvh;
    display: block;
    padding: 0;
    overflow: hidden;
}
.auth-shell {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(420px,1.08fr) minmax(420px,.92fr);
    background:linear-gradient(108deg,#111b2d 0%,#182944 49%,var(--surface) 61%,var(--surface) 100%);
    overflow: hidden;
    transition: background 520ms var(--motion-ui);
}
.auth-brand-panel { position:relative; z-index:1; min-height:100dvh; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(38px,6vw,82px); border-right:0; background:radial-gradient(circle at 18% 90%,rgba(79,124,255,.12),transparent 32%); color:#fff; overflow:hidden; isolation:isolate; }
.auth-brand-panel::before,.auth-brand-panel::after { content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(1px); }
.auth-brand-panel::before { width:520px; height:520px; right:-210px; top:-180px; border:1px solid rgba(112,151,255,.22); box-shadow:0 0 100px rgba(79,124,255,.10),inset 0 0 90px rgba(79,124,255,.05); animation:auth-orbit 13s ease-in-out infinite alternate; }
.auth-brand-panel::after { width:310px; height:310px; left:-160px; bottom:-120px; background:radial-gradient(circle,rgba(79,124,255,.20),transparent 68%); animation:auth-float 10s ease-in-out infinite alternate; }
.auth-motion-scene { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.auth-network { position:absolute; right:-5%; bottom:-10%; width:min(92%,850px); height:auto; color:#7898ff; opacity:.28; filter:drop-shadow(0 0 10px rgba(79,124,255,.12)); animation:auth-network-drift 15s ease-in-out infinite alternate; }
.auth-network-path { stroke:currentColor; stroke-width:1.25; stroke-dasharray:7 11; animation:auth-path-flow 16s linear infinite; }
.auth-network .path-two { opacity:.7; animation-duration:20s; animation-direction:reverse; }
.auth-network .path-three { opacity:.48; animation-duration:24s; }
.auth-network-nodes circle { fill:#8ca8ff; transform-box:fill-box; transform-origin:center; animation:auth-node-pulse 3.4s ease-in-out infinite; }
.auth-network-nodes circle:nth-child(2n) { animation-delay:-1.2s; }
.auth-network-nodes circle:nth-child(3n) { animation-delay:-2.1s; }
.auth-aurora { position:absolute; border-radius:50%; filter:blur(65px); opacity:.26; will-change:transform; }
.auth-aurora-one { width:280px; height:280px; left:8%; top:17%; background:#315ee4; animation:auth-aurora-one 12s ease-in-out infinite alternate; }
.auth-aurora-two { width:230px; height:230px; right:9%; bottom:12%; background:#654fdc; animation:auth-aurora-two 15s ease-in-out infinite alternate; }
.auth-brand { display:flex; align-items:center; gap:13px; }
.auth-brand-mark { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:linear-gradient(145deg,#7196ff,#315ee4); box-shadow:0 14px 34px rgba(49,94,228,.30); }
.auth-brand-mark { animation:auth-brand-breathe 5s ease-in-out infinite; }
.auth-brand-mark svg { width:24px; height:24px; }
.auth-brand strong { display:block; font-size:14px; letter-spacing:.12em; }
.auth-brand span { display:block; margin-top:3px; color:rgba(255,255,255,.55); font-size:10px; }
.auth-story { max-width:650px; animation:auth-content-in 820ms 100ms var(--motion-calm) both; }
.auth-kicker { display:flex; align-items:center; gap:9px; margin-bottom:16px; color:#91abff; font-size:10px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.auth-kicker::before { content:""; width:26px; height:1px; background:#7395ff; transform-origin:left; animation:auth-kicker-line 3.8s ease-in-out infinite; }
.auth-story h1 { margin:0; max-width:620px; font-size:clamp(38px,5vw,68px); font-weight:690; line-height:1.03; letter-spacing:-.058em; text-wrap:balance; }
.auth-story p { max-width:560px; margin:22px 0 0; color:rgba(255,255,255,.62); font-size:14px; line-height:1.8; }
.auth-capabilities { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.auth-capability { padding:7px 10px; border:1px solid rgba(255,255,255,.10); border-radius:8px; background:rgba(255,255,255,.035); color:rgba(255,255,255,.68); font-size:9px; }
.auth-capability:nth-child(odd) { animation:auth-chip-float 6s ease-in-out infinite alternate; }
.auth-capability:nth-child(even) { animation:auth-chip-float 7s -2.3s ease-in-out infinite alternate-reverse; }
.auth-brand-footer { color:rgba(255,255,255,.36); font-size:9px; letter-spacing:.05em; }
.auth-form-panel { position:relative; z-index:2; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:clamp(28px,5vw,70px); background:linear-gradient(90deg,transparent,var(--surface) 18%,var(--surface) 100%); transition:background 520ms var(--motion-ui); }
.auth-theme-toggle { position:absolute; top:24px; right:24px; z-index:4; width:40px; height:40px; display:grid; place-items:center; padding:0; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text-soft); cursor:pointer; overflow:hidden; transition:background 130ms ease,border-color 130ms ease,transform 130ms var(--motion-ui); }
.auth-theme-toggle:hover { border-color:var(--border-strong); background:var(--hover); transform:translateY(-1px); }
.auth-theme-toggle .theme-icon { width:18px; height:18px; }
.auth-form-wrap { width:min(100%,420px); animation:auth-content-in 760ms 160ms var(--motion-calm) both; }
.auth-form-wrap > .auth-form-eyebrow { animation:auth-detail-in 640ms 240ms var(--motion-calm) both; }
.auth-form-wrap > h2 { animation:auth-detail-in 680ms 300ms var(--motion-calm) both; }
.auth-form-wrap > .auth-form-intro { animation:auth-detail-in 700ms 360ms var(--motion-calm) both; }
.auth-form-wrap > form { animation:auth-detail-in 740ms 420ms var(--motion-calm) both; }
.auth-form-wrap > .auth-form-footer { animation:auth-detail-in 760ms 480ms var(--motion-calm) both; }
.auth-form-eyebrow { color:var(--primary); font-size:9px; font-weight:780; letter-spacing:.11em; text-transform:uppercase; }
.auth-form-wrap h2 { margin:10px 0 0; font-size:clamp(28px,3vw,38px); letter-spacing:-.045em; }
.auth-form-intro { margin:9px 0 30px; color:var(--muted); font-size:12px; line-height:1.65; }
.auth-google-form { margin-top:22px; }
.auth-google { width:100%; height:48px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text); font-size:12px; font-weight:700; cursor:pointer; transition:transform 120ms var(--motion-ui),border-color 120ms ease,background 120ms ease; }
.auth-google:hover { border-color:var(--primary); background:var(--surface-3); transform:translateY(-1px); }
.auth-google:active { transform:scale(.987); }
.auth-google svg { width:18px; height:18px; flex:0 0 auto; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:21px 0 2px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.auth-divider::before,.auth-divider::after { content:""; height:1px; flex:1; background:var(--border); }
.auth-error { margin-bottom:18px; padding:12px 13px; border:1px solid rgba(228,81,81,.22); border-radius:10px; background:var(--danger-soft); color:var(--danger); font-size:11px; animation:auth-shake 320ms var(--motion-ui); }
.auth-field { margin-top:17px; }
.auth-field label { display:block; margin:0 0 8px; color:var(--text-soft); font-size:10px; font-weight:680; }
.auth-input-wrap { position:relative; }
.auth-input-icon { position:absolute; left:13px; top:50%; width:18px; height:18px; color:var(--muted); transform:translateY(-50%); pointer-events:none; }
.auth-input-icon { transition:color 140ms ease,transform 180ms var(--motion-ui); }
.auth-input-wrap:focus-within .auth-input-icon { color:var(--primary); transform:translateY(-50%) scale(1.08); }
.auth-input { width:100%; height:48px; padding:0 44px 0 42px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface-2); color:var(--text); outline:none; font-size:12px; transition:border-color 140ms ease,box-shadow 140ms ease,background 140ms ease; }
.auth-input::placeholder { color:var(--muted); }
.auth-input:focus { border-color:rgba(79,124,255,.72); background:var(--surface); box-shadow:0 0 0 4px rgba(79,124,255,.10); }
.auth-input-simple { padding:0 14px; }
.auth-forgot { display:block; width:max-content; margin:14px auto 0; color:var(--primary); font-size:10px; font-weight:680; }
.auth-forgot:hover { text-decoration:underline; }
.auth-reset-errors { margin:7px 0 0; color:var(--danger); font-size:10px; line-height:1.5; }
.auth-reset-actions { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px; }
.auth-reset-actions .auth-submit { margin-top:0; text-align:center; display:grid; place-items:center; }
.auth-password-toggle { position:absolute; right:8px; top:50%; width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; transform:translateY(-50%); }
.auth-password-toggle:hover { background:var(--hover); color:var(--text); }
.auth-password-toggle svg { width:17px; height:17px; }
.auth-submit { width:100%; height:48px; margin-top:24px; border:0; border-radius:10px; background:linear-gradient(135deg,var(--primary-solid),var(--primary-solid-hover)); color:var(--on-primary); font-size:12px; font-weight:750; cursor:pointer; box-shadow:0 12px 28px rgba(38,79,178,.24); transition:transform 120ms var(--motion-ui),box-shadow 120ms ease,filter 120ms ease; }
.auth-submit:hover { filter:brightness(1.06); box-shadow:0 16px 34px rgba(56,101,237,.28); transform:translateY(-1px); }
.auth-submit:active { transform:scale(.987); }
.auth-submit.is-loading { opacity:.72; cursor:wait; }
.auth-form-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; color:var(--muted); font-size:9px; }
.auth-secure { display:flex; align-items:center; gap:6px; }
.auth-secure svg { width:14px; height:14px; color:var(--success); }

/* MESSAGES */
.app-message { border-radius:11px; box-shadow:var(--shadow-md); animation:system-toast-in 260ms var(--motion-in) both; }

/* Login claro real, no solo el formulario derecho. */
html[data-theme="light"] .auth-brand-panel {
    background: radial-gradient(circle at 18% 90%,rgba(79,124,255,.10),transparent 32%);
    color: #192238;
}

html[data-theme="light"] .auth-shell {
    background:linear-gradient(108deg,#dce6f5 0%,#e8eef7 49%,var(--surface-2) 61%,var(--surface) 100%);
}

html[data-theme="light"] .auth-form-panel {
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 94%,transparent) 18%,var(--surface) 100%);
}

html[data-theme="light"] .auth-network { color:#315ee4; opacity:.18; }
html[data-theme="light"] .auth-aurora { opacity:.16; }

html[data-theme="light"] .auth-brand-panel::before {
    border-color: rgba(49,94,228,.15);
    box-shadow: 0 0 100px rgba(79,124,255,.08), inset 0 0 90px rgba(79,124,255,.04);
}

html[data-theme="light"] .auth-brand-panel .auth-brand span span,
html[data-theme="light"] .auth-story p,
html[data-theme="light"] .auth-brand-footer {
    color: var(--muted);
}

html[data-theme="light"] .auth-capability {
    border-color: rgba(25,34,56,.10);
    background: rgba(255,255,255,.50);
    color: rgba(25,34,56,.66);
}

/* LEGIBILITY FLOOR */
:is(.attention-copy span,.quick-action span,.user-stat-detail,.user-panel-title p,.priority-copy span,.sla-summary-item span,.sla-progress-head,.activity-empty span,.user-quick-action span) {
    font-size:10px;
}

:is(.priority-badge,.user-role-card span) { font-size:9px; }

:is(.ticket-panel-tag,.ticket-issue-primary span,.ticket-data-item span,.ticket-form-label,.management-field label,.current-owner-copy span,.sla-state-copy span,.assignment-note,.sla-placeholder) {
    font-size:10px;
}

.ticket-followup-field label,
.ticket-file-input,
.ticket-followup-submit,
.ticket-comment-type,
.ticket-comment time,
.ticket-comment-file,
.timeline-top time,
.timeline-user {
    font-size:10px;
}

.ticket-comment-avatar { font-size:9px; }
.profile-progress-ring span { font-size:8px; }

::placeholder { color:var(--muted); opacity:.78; }

/* Transición login → aplicación y aplicación → login. */
html.app-auth-enter .sidebar { animation:auth-app-sidebar-in 720ms var(--motion-calm) both; }
html.app-auth-enter .topbar { animation:auth-app-topbar-in 760ms 70ms var(--motion-calm) both; }
html.app-auth-enter .app-content { animation:auth-app-content-in 820ms 130ms var(--motion-calm) both; }

html.app-auth-leave .sidebar { animation:auth-app-sidebar-out 460ms var(--motion-calm-inout) both; }
html.app-auth-leave .app-main { animation:auth-app-content-out 460ms var(--motion-calm-inout) both; pointer-events:none; }

html.login-auth-enter .auth-brand-panel { animation:auth-login-panel-in 780ms var(--motion-calm) both; }
html.login-auth-enter .auth-form-panel { animation:auth-login-form-in 820ms 80ms var(--motion-calm) both; }
html.auth-login-leave .auth-brand-panel { animation:auth-login-panel-out 480ms var(--motion-calm-inout) both; }
html.auth-login-leave .auth-form-panel { animation:auth-login-form-out 480ms var(--motion-calm-inout) both; pointer-events:none; }

.system-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 520ms var(--motion-calm) var(--reveal-delay, 0ms),
        transform 520ms var(--motion-calm) var(--reveal-delay, 0ms),
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.system-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

:is(.dashboard-kpi,.user-stat,.ticket-stat).system-reveal.is-visible:hover {
    transform: translateY(-2px);
}

@keyframes system-page-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes system-toast-in { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes profile-orbit-drift { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(-24px,18px,0) scale(1.07); } }
@keyframes profile-ambient-pulse { 0%,100% { opacity:.45; transform:scale(.88); } 50% { opacity:1; transform:scale(1.12); } }
@keyframes profile-status-breathe { 0%,100% { box-shadow:0 0 0 3px rgba(35,196,131,.08); } 50% { box-shadow:0 0 0 7px rgba(35,196,131,.02); } }
@keyframes auth-content-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@keyframes auth-orbit { to { transform:translate(-30px,35px) scale(1.08); } }
@keyframes auth-float { to { transform:translate(45px,-25px) scale(1.12); } }
@keyframes auth-network-drift { from { transform:translate3d(-14px,12px,0) rotate(-1deg); } to { transform:translate3d(18px,-16px,0) rotate(1.5deg); } }
@keyframes auth-path-flow { to { stroke-dashoffset:-360; } }
@keyframes auth-node-pulse { 0%,100% { opacity:.38; transform:scale(.75); } 50% { opacity:1; transform:scale(1.55); } }
@keyframes auth-aurora-one { to { transform:translate3d(100px,55px,0) scale(1.22); } }
@keyframes auth-aurora-two { to { transform:translate3d(-90px,-60px,0) scale(.82); } }
@keyframes auth-brand-breathe { 0%,100% { transform:translateY(0); box-shadow:0 14px 34px rgba(49,94,228,.30); } 50% { transform:translateY(-3px); box-shadow:0 20px 42px rgba(49,94,228,.38); } }
@keyframes auth-chip-float { to { transform:translateY(-4px); border-color:rgba(123,157,255,.24); } }
@keyframes auth-kicker-line { 0%,100% { transform:scaleX(.55); opacity:.55; } 50% { transform:scaleX(1); opacity:1; } }
@keyframes auth-detail-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@keyframes auth-shake { 25% { transform:translateX(-4px); } 55% { transform:translateX(3px); } 80% { transform:translateX(-2px); } }
@keyframes auth-app-sidebar-in { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:none; } }
@keyframes auth-app-topbar-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@keyframes auth-app-content-in { from { opacity:0; transform:translateY(10px) scale(.998); } to { opacity:1; transform:none; } }
@keyframes auth-app-sidebar-out { to { opacity:0; transform:translateX(-16px); } }
@keyframes auth-app-content-out { to { opacity:0; transform:translateY(6px) scale(.998); } }
@keyframes auth-login-panel-in { from { opacity:0; transform:translateX(-14px); } to { opacity:1; transform:none; } }
@keyframes auth-login-form-in { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } }
@keyframes auth-login-panel-out { to { opacity:0; transform:translateX(-13px); } }
@keyframes auth-login-form-out { to { opacity:0; transform:translateX(13px); } }
@keyframes system-page-out { to { opacity:0; transform:translateY(-3px) scale(.999); } }

html.system-page-leave .page-transition {
    animation: system-page-out 320ms var(--motion-calm-inout) both;
    pointer-events: none;
}

@media (max-width:1120px) {
    .auth-shell { grid-template-columns:1fr 1fr; }
    :is(.dashboard-kpis,.user-stats,.ticket-stats) { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .users-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:820px) {
    .auth-shell { display:block; }
    .auth-brand-panel { min-height:280px; padding:32px 28px; }
    .auth-story { margin-top:45px; }
    .auth-story h1 { max-width:520px; font-size:38px; }
    .auth-story p,.auth-capabilities { display:none; }
    .auth-brand-footer { display:none; }
    .auth-form-panel { min-height:calc(100vh - 280px); padding:40px 24px; }
    .profile-grid { grid-template-columns:1fr; }
    .profile-hero { align-items:flex-start; flex-direction:column; gap:24px; }
    .profile-completion { align-self:stretch; width:max-content; max-width:100%; }
    .users-heading { align-items:flex-start; }
    .users-toolbar { flex-wrap:wrap; }
    .users-search { flex-basis:100%; }
    .users-toolbar select { flex:1; }
    .user-editor-grid { grid-template-columns:1fr; }
    .import-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .import-stat:nth-child(2) { border-right:0; }
    .import-stat:nth-child(-n+2) { border-bottom:1px solid var(--border); }
}

@media (max-width:620px) {
    .app-content { padding:18px 14px 42px; }
    :is(.dashboard-hero,.user-welcome) { min-height:0; padding:24px 20px; }
    :is(.dashboard-kpis,.user-stats,.ticket-stats) { grid-template-columns:1fr; }
    .tickets-heading,.import-heading { align-items:flex-start; flex-direction:column; }
    .import-preview { grid-template-columns:1fr; padding:15px; }
    .import-result-footer { align-items:stretch; flex-direction:column; }
    .import-actions { flex-direction:column-reverse; }
    .system-button { width:100%; }
    .profile-hero { padding:25px 20px; }
    .profile-identity { align-items:flex-start; gap:15px; }
    .profile-avatar { flex-basis:58px; width:58px; height:58px; border-radius:16px; font-size:20px; }
    .profile-copy p { font-size:10px; }
    .profile-fields { grid-template-columns:1fr; padding:20px 16px 22px; }
    .profile-field-wide { grid-column:auto; }
    .photo-editor { align-items:flex-start; }
    .photo-editor-preview { flex-basis:60px; width:60px; height:60px; border-radius:17px; }
    .photo-editor-preview img { border-radius:16px; }
    .profile-form-footer { align-items:stretch; flex-direction:column; padding:16px; }
    .profile-save-button { width:100%; }
    .profile-card-head { align-items:flex-start; padding-inline:16px; }
    .profile-form-state { margin-top:4px; }
    .users-heading { flex-direction:column; padding:23px 20px; }
    .users-create-button { width:100%; }
    .users-toolbar { align-items:stretch; padding:10px; }
    .users-toolbar select,.users-filter-button { width:100%; }
    .users-clear-filter { padding:7px; text-align:center; }
    .users-panel-head { align-items:flex-start; }
    .users-sync-status { display:none; }
    .users-pagination { align-items:stretch; flex-direction:column; }
    .users-pagination > div,.users-pagination .system-button { width:100%; }
    .user-editor-heading { align-items:flex-start; }
    .user-editor-fields { grid-template-columns:1fr; padding-inline:16px; }
    .user-admin-field.is-wide { grid-column:auto; }
    .user-editor-actions { position:static; align-items:stretch; flex-direction:column; }
    .user-editor-actions > div { flex-direction:column-reverse; }
    .user-editor-actions .system-button { width:100%; }
    .auth-brand-panel { min-height:230px; }
    .auth-story { margin-top:32px; }
    .auth-story h1 { font-size:30px; }
    .auth-form-panel { min-height:calc(100vh - 230px); }
}

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