/* Ticketera: shared presentation tokens, PHP + Tailwind + native controls. */
:root {
    --ui-bg: #f5f6fa;
    --ui-surface: #ffffff;
    --ui-subtle: #f0f2f7;
    --ui-input: #ffffff;
    --ui-border: #dce1eb;
    --ui-text: #202637;
    --ui-muted: #596579;
    --ui-accent: #4f46e5;
    --ui-accent-hover: #4338ca;
    --ui-selected: #eeedff;
    --ui-selected-text: #4338ca;
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-drawer: cubic-bezier(.32, .72, 0, 1);
    --dur: 180ms;
}
.dark {
    --ui-bg: #101218;
    --ui-surface: #191c24;
    --ui-subtle: #222630;
    --ui-input: #20242e;
    --ui-border: #323846;
    --ui-text: #eef0f6;
    --ui-muted: #abb4c6;
    --ui-accent: #635bff;
    --ui-accent-hover: #756eff;
    --ui-selected: #292747;
    --ui-selected-text: #c0bcff;
}
* { -webkit-tap-highlight-color: transparent; }
html { scrollbar-gutter: stable; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-variant-numeric: tabular-nums; text-rendering: optimizeLegibility; }
body.ticketera-ui, .dark body.ticketera-ui { background: var(--ui-bg); color: var(--ui-text); line-height: 1.5; }
.ticketera-ui ::selection { background: var(--ui-selected); color: var(--ui-selected-text); }
.ticketera-ui :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.ticketera-ui a { text-underline-offset: 3px; }
.ticketera-ui button, .ticketera-ui a, .ticketera-ui input, .ticketera-ui select { touch-action: manipulation; }
.ticketera-ui button:disabled, .ticketera-ui input:disabled, .ticketera-ui select:disabled { opacity: .6; cursor: not-allowed; }
.ticketera-ui [hidden] { display: none !important; }
.ticketera-ui .ui-surface { background: var(--ui-surface); border-color: var(--ui-border); border-radius: 14px; box-shadow: none; }
.ticketera-ui .ui-primary, .ticketera-ui .ui-brand, .ticketera-ui .ui-avatar { background: var(--ui-accent); background-image: none; color: #fff; box-shadow: none; }
.ticketera-ui .ui-primary { border: 1px solid transparent; border-radius: 9px; min-height: 42px; font-weight: 600; transition: none; }
.ticketera-ui .ui-primary:active { opacity: .85; }
.ticketera-ui .ui-primary:focus-visible { outline-offset: 4px; }
.ticketera-ui .ui-brand { border-radius: 10px; }
.ticketera-ui .ui-avatar { background: var(--ui-selected); color: var(--ui-selected-text); }
.ticketera-ui [class~="text-slate-400"], .ticketera-ui [class~="text-slate-500"] { color: var(--ui-muted); }
.dark .ticketera-ui [class~="dark:text-slate-500"], .dark .ticketera-ui [class~="dark:text-slate-600"] { color: var(--ui-muted); }
.ticketera-ui [class~="border-slate-200"], .dark .ticketera-ui [class~="dark:border-slate-800"], .dark .ticketera-ui [class~="dark:border-slate-700"] { border-color: var(--ui-border); }
.ticketera-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), .ticketera-ui select, .ticketera-ui textarea {
    min-width: 0; min-height: 42px; border-color: var(--ui-border); border-radius: 9px;
    background-color: var(--ui-input); color: var(--ui-text); caret-color: var(--ui-accent);
    font: inherit; font-size: .875rem;
}
.ticketera-ui input::placeholder, .ticketera-ui textarea::placeholder { color: var(--ui-muted); opacity: 1; }
.ticketera-ui input:not([type="checkbox"]):not([type="radio"]):focus, .ticketera-ui select:focus, .ticketera-ui textarea:focus { border-color: var(--ui-accent); outline: 2px solid var(--ui-selected-text); outline-offset: 2px; box-shadow: none; }
.ticketera-ui input[type="checkbox"], .ticketera-ui input[type="radio"] { accent-color: var(--ui-accent); }
.ticketera-ui input[type="file"] { max-width: 100%; font-size: .875rem; }
.ticketera-ui input[type="file"]::file-selector-button { border: 1px solid var(--ui-border); border-radius: 7px; padding: 8px 12px; margin-right: 12px; background: var(--ui-subtle); color: var(--ui-text); cursor: pointer; }
.ticketera-ui select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238c95a8' stroke-width='1.7'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
.ticketera-ui input:-webkit-autofill { -webkit-text-fill-color: var(--ui-text); -webkit-box-shadow: 0 0 0 1000px var(--ui-input) inset; }
.ticketera-ui textarea { resize: vertical; line-height: 1.6; }
.ticketera-ui label { color: var(--ui-text); }
.ticketera-ui table { font-size: .875rem; font-variant-numeric: tabular-nums; }
.ticketera-ui thead { background: var(--ui-subtle); }
.ticketera-ui th { color: var(--ui-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .035em; padding-top: 14px; padding-bottom: 14px; white-space: nowrap; }
.ticketera-ui td { padding-top: 15px; padding-bottom: 15px; }
.ticketera-ui td[colspan] { padding-top: 56px; padding-bottom: 56px; color: var(--ui-muted); }
.ticketera-ui td[colspan] > svg { width: 34px; height: 34px; color: var(--ui-muted); margin-bottom: 14px; }
.ticketera-ui table a:focus-visible { outline-offset: 3px; }
.ticketera-ui .overflow-x-auto { overscroll-behavior-x: contain; }
.ticketera-ui .overflow-x-auto table { min-width: 620px; }
.page-content .grid > * { min-width: 0; }
.page-content canvas { max-width: 100%; }
.page-content { width: 100%; max-width: 1720px; margin-inline: auto; padding: 32px; }
.page-content h1 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -.03em; font-weight: 650; color: var(--ui-text); }
.page-content h2 { letter-spacing: -.015em; }
.page-content > .flex:has(h1), .page-content > div > .flex:has(h1) { gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.page-content > .grid > .ui-surface:has(> p + p) > p:last-child { font-size: 1.65rem; font-weight: 650; }
.page-content [data-paso-marker] button { min-height: 44px; }
.page-content [data-paso-marker] button[data-active="true"] { background: var(--ui-accent); color: #fff; }
.page-content [data-paso-marker] button[data-done="true"] { color: #059669; }
.dark .page-content [data-paso-marker] button[data-done="true"] { color: #6ee7b7; }
.page-content [data-paso-marker] span { display: inline; }
.page-content [data-paso-link] { display: block; }
.page-content [data-paso] label { flex-wrap: wrap; }
.app-header { height: 72px; background: var(--ui-surface) !important; border-color: var(--ui-border); backdrop-filter: none; gap: 16px; }
.app-header > button, .app-header #themeToggle, .app-header #notifBtn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: 9px; }
.app-header #globalSearch { max-width: 500px; }
.app-header #globalSearchInput { background-color: var(--ui-subtle); border: 1px solid var(--ui-border); }
.app-header #userMenuBtn { min-height: 44px; }
.ticketera-ui #notifDropdown, .ticketera-ui #userMenuDropdown, .ticketera-ui #globalSearchResults, .ticketera-ui [data-dropdown-menu] { background: var(--ui-surface); border-color: var(--ui-border); border-radius: 12px; box-shadow: 0 12px 40px rgb(0 0 0 / .14); }
.ticketera-ui [data-dropdown-menu].ui-floating-menu { position: fixed; z-index: 80; }
#sidebar { background: var(--ui-surface); border-color: var(--ui-border); width: 248px; transition: transform 200ms var(--ease-drawer); }
#sidebar > div:first-of-type { height: 72px; }
#sidebar nav { padding: 20px 12px; }
#sidebar .seccion-label { font-size: 10px; letter-spacing: .08em; margin-bottom: 8px; color: var(--ui-muted); }
#sidebar nav a { min-height: 40px; border-radius: 8px; gap: 12px; font-size: 13px; color: var(--ui-muted); }
#sidebar nav a[aria-current="page"] { background: var(--ui-selected); color: var(--ui-selected-text); font-weight: 600; }
#sidebar .sidebar-footer button { min-height: 40px; }
.app-page #mainArea { transition: none; }
.app-page #mainArea > footer { color: var(--ui-muted); font-size: 11px; border-color: var(--ui-border); padding-inline: 32px; }
.skip-link { position: fixed; top: 12px; left: 260px; z-index: 100; padding: 12px 16px; background: var(--ui-accent); color: #fff; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.sidebar-scroll { scrollbar-width: thin; scrollbar-color: var(--ui-border) transparent; }
@media (min-width: 1024px) {
    .app-page #mainArea { margin-left: 248px; }
    body.sidebar-collapsed #sidebar { width: 76px; }
    body.sidebar-collapsed #mainArea { margin-left: 76px; }
    body.sidebar-collapsed #sidebar .logo-text, body.sidebar-collapsed #sidebar nav a span, body.sidebar-collapsed #sidebar .seccion-label, body.sidebar-collapsed #sidebar .pie-text { display: none; }
    body.sidebar-collapsed #sidebar nav a, body.sidebar-collapsed #sidebar .sidebar-footer button { justify-content: center; }
    body.sidebar-collapsed #sidebar > div:first-of-type { justify-content: center; padding-inline: 0; }
    .app-header #headerMenuBtn { display: none; }
}
@media (hover: hover) and (pointer: fine) {
    .ticketera-ui .ui-primary:hover { background: var(--ui-accent-hover); }
    #sidebar nav a:not([aria-current="page"]):hover { background: var(--ui-subtle); color: var(--ui-text); }
    .ticketera-ui tbody tr:hover { background: var(--ui-subtle); }
}
/* Login: a clear division between product context and the real sign-in task. */
.auth-page { min-height: 100svh; display: flex; flex-direction: column; }
.auth-topbar { padding: 28px 48px; display: flex; justify-content: space-between; align-items: center; }
.auth-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 550; color: var(--ui-text); letter-spacing: -.02em; }
.auth-brand strong { font-weight: 750; }
.brand-mark { width: 38px; height: 38px; background: var(--ui-accent); color: #fff; display: grid; place-items: center; border-radius: 10px; }
.brand-mark svg { width: 22px; height: 22px; }
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 10px; color: var(--ui-muted); }
.icon-button svg { width: 20px; height: 20px; }
.auth-shell { flex: 1; width: calc(100% - 96px); max-width: 1140px; margin: 16px auto; display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; min-height: 520px; border: 1px solid var(--ui-border); border-radius: 16px; overflow: hidden; background: var(--ui-surface); }
.auth-intro { background: var(--ui-subtle); padding: 56px 48px 32px; display: flex; flex-direction: column; }
.auth-intro h2 { font-size: 3.25rem; line-height: 1.12; letter-spacing: -.035em; font-weight: 650; color: var(--ui-text); margin: 0; }
.auth-intro h2 span { color: var(--ui-selected-text); }
.auth-intro > p { max-width: 34ch; color: var(--ui-muted); font-size: 15px; line-height: 1.75; margin-top: 24px; }
.auth-intro-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 38px; color: var(--ui-muted); font-size: 12px; flex-wrap: wrap; }
.auth-intro-footer svg { width: 16px; height: 16px; }
.auth-intro-footer span { margin-left: auto; }
.auth-access { padding: 56px 48px; display: flex; align-items: center; justify-content: center; }
.auth-access-inner { width: 100%; max-width: 360px; }
.auth-access h1 { font-size: 1.75rem; font-weight: 650; line-height: 1.3; letter-spacing: -.03em; }
.auth-description { font-size: 14px; color: var(--ui-muted); margin: 9px 0 30px; }
.login-form { display: grid; gap: 20px; }
.login-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.login-input-wrap { position: relative; }
.login-input-wrap > svg { position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; color: var(--ui-muted); pointer-events: none; }
.ticketera-ui .login-input-wrap input { width: 100%; height: 48px; padding: 12px 44px; border: 1px solid var(--ui-border); }
.password-toggle { position: absolute; right: 3px; top: 2px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ui-muted); border-radius: 7px; }
.password-toggle svg { width: 18px; height: 18px; }
.login-options { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 12px; }
.login-options label { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ui-muted); cursor: pointer; }
.login-options input { width: 16px; height: 16px; }
.login-help { min-height: 44px; color: var(--ui-selected-text); font-size: 12px; }
.login-help-message { padding: 12px; border: 1px solid var(--ui-border); border-radius: 8px; font-size: 12px; color: var(--ui-muted); }
.ticketera-ui .login-submit { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; font-size: 14px; }
.login-submit svg { width: 18px; height: 18px; }
.login-submit[aria-busy="true"] { opacity: .75; }
.auth-security { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--ui-muted); font-size: 11px; margin-top: 26px; }
.auth-security svg { width: 14px; height: 14px; flex-shrink: 0; }
.auth-footer { display: flex; justify-content: space-between; padding: 24px 48px; color: var(--ui-muted); font-size: 11px; }
.auth-alert { display: flex; gap: 10px; align-items: flex-start; padding: 13px; margin-bottom: 22px; border-radius: 9px; font-size: 13px; }
.auth-alert svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-alert-error { background: #fff1f2; color: #be123c; }
.dark .auth-alert-error { background: #3c202a; color: #fda4af; }
.auth-alert-success { background: #ecfdf5; color: #047857; }
.dark .auth-alert-success { background: #16392f; color: #6ee7b7; }
.ticketera-ui .swal2-popup { background: var(--ui-surface); color: var(--ui-text); border-radius: 14px; }
.ticketera-ui .swal2-title, .ticketera-ui .swal2-html-container { color: var(--ui-text); }
.ticketera-ui .swal2-input, .ticketera-ui .swal2-textarea { background: var(--ui-input); color: var(--ui-text); border-color: var(--ui-border); }
.ticketera-ui .swal2-styled.swal2-confirm { background: var(--ui-accent); border-radius: 8px; }
.ticketera-ui .swal2-styled.swal2-cancel { background: var(--ui-subtle); color: var(--ui-text); border-radius: 8px; }
.public-page > div { max-width: 820px; }
.error-page > div { padding: 40px 24px; }
.error-page h1 { letter-spacing: -.04em; }
@media (max-width: 1023px) {
    .app-page #mainArea { margin-left: 0; }
    #sidebar { width: 272px; }
    .page-content { padding: 24px; }
    .auth-shell { width: calc(100% - 48px); margin-block: 16px; }
    .auth-intro, .auth-access { padding: 40px 28px; }
    .auth-intro h2 { font-size: 2.75rem; }
    .auth-topbar, .auth-footer { padding-inline: 24px; }
    .skip-link { left: 16px; }
}
@media (max-width: 767px) {
    .auth-shell { display: block; min-height: 0; max-width: 440px; margin: auto; width: calc(100% - 32px); }
    .auth-intro { display: none; }
    .auth-access { padding: 32px 24px; }
    .auth-access h1 { font-size: 1.6rem; }
    .auth-topbar { padding: 20px; }
    .auth-footer { padding: 24px 20px; gap: 12px; }
    .page-content { padding: 24px 16px; }
    .page-content h1 { font-size: 1.5rem; }
    .app-header { height: 64px; gap: 8px; padding-inline: 12px; }
    .app-header > button, .app-header #themeToggle, .app-header #notifBtn { min-width: 36px; }
    .app-header > button.hidden { display: none; }
    .app-header #userMenuBtn { padding-inline: 2px; gap: 0; }
    .app-header #userMenuBtn > svg { display: none; }
    .app-header #globalSearchInput { padding-right: 32px; }
    .ticketera-ui #notifDropdown { position: fixed; top: 68px; left: 12px; right: 12px; width: auto; max-width: 420px; margin-left: auto; }
    .ticketera-ui #globalSearchResults { width: min(440px, calc(100vw - 32px)); }
    .page-content .ui-surface.p-6, .page-content .ui-surface.p-8 { padding: 20px; }
    .page-content [data-view="unused"] { display: block; }
    .app-page #mainArea > footer { padding-inline: 16px; }
    .ticketera-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .ticketera-ui select, .ticketera-ui textarea { font-size: 16px; min-height: 44px; }
    .ticketera-ui button, .ticketera-ui a.inline-flex { min-height: 44px; }
    .page-content label.flex, .page-content label.inline-flex { min-height: 44px; }
    .page-content td a { display: inline-flex; align-items: center; min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .ticketera-ui *, .ticketera-ui *::before, .ticketera-ui *::after { animation: none !important; scroll-behavior: auto !important; transition-property: opacity, color, background-color, border-color !important; transition-duration: 120ms !important; }
    .ticketera-ui .ui-primary:active { transform: none; }
    #sidebar { transition: none !important; }
}
@media (prefers-contrast: more) {
    :root { --ui-border: #7c8596; --ui-muted: #3c475a; }
    .dark { --ui-border: #8b95a7; --ui-muted: #d2d8e4; }
}
@media print {
    #sidebar, .app-header, #mainArea > footer, .no-print, .skip-link { display: none !important; }
    .app-page #mainArea { margin-left: 0 !important; }
    .ticketera-ui { background: #fff !important; color: #000 !important; }
    .page-content { padding: 0; }
    .ticketera-ui .overflow-x-auto { overflow: visible; }
}

.dark .ticketera-ui select { background-color: var(--ui-input); color: var(--ui-text); border-color: var(--ui-border); }
.dark .ticketera-ui thead { background: var(--ui-subtle); }

.page-content ol p { overflow-wrap: anywhere; }
.page-content .metric-label { white-space: normal; overflow: visible; line-height: 1.4; font-size: 12px; }
.page-content [data-view='dashboard/index'] .metric-label { min-height: 2.8em; }

/* Refinement: a workbench with flatter surfaces and a distinctive support entrance. */
:root { --ui-bg: #f6f7f9; --ui-subtle: #f1f3f6; --ui-border: #dce0e7; --ui-text: #232831; --ui-muted: #586274; }
.dark { --ui-bg: #14161b; --ui-surface: #1d2026; --ui-subtle: #252930; --ui-input: #22262d; --ui-border: #373d46; --ui-text: #f1f3f6; --ui-muted: #afb8c7; }
.ticketera-ui .ui-surface { border-radius: 12px; }
.ticketera-ui .ui-primary { border-radius: 7px; }
.page-content h1 { font-size: 1.875rem; font-weight: 650; letter-spacing: -.035em; }
.page-content h2, .page-content h3 { letter-spacing: -.015em; }
.ticketera-ui thead { background: var(--ui-bg); }
.ticketera-ui th { text-transform: none; font-size: 12px; letter-spacing: 0; font-weight: 600; }
.ticketera-ui td { vertical-align: middle; }
#sidebar { background: var(--ui-bg); }
#sidebar nav a { border-radius: 6px; min-height: 38px; }
#sidebar nav a[aria-current="page"] { background: var(--ui-surface); box-shadow: inset 0 0 0 1px var(--ui-border); color: var(--ui-text); }
#sidebar nav a[aria-current="page"] > svg { color: var(--ui-selected-text); }
#sidebar .seccion-label { text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500; }
.app-header { height: 66px; background: var(--ui-bg) !important; }
.app-header #globalSearchInput { background: var(--ui-surface); border-radius: 7px; }
.page-content [data-dropdown-toggle] { border-radius: 6px; }
.page-content[data-view="dashboard/index"] section > .grid { gap: 0; border: 1px solid var(--ui-border); border-radius: 12px; overflow: hidden; background: var(--ui-surface); }
.page-content[data-view="dashboard/index"] section > .grid > .ui-surface { border: 0; border-radius: 0; box-shadow: inset -1px -1px 0 var(--ui-border); padding: 20px; }
.page-content[data-view="dashboard/index"] section > .grid > .ui-surface > div > span { background: transparent; }
.page-content[data-view="dashboard/index"] section > div > h2 { text-transform: none; color: var(--ui-text); font-size: 14px; }
.ticketera-ui .auth-shell { width: calc(100% - 96px); grid-template-columns: 1.1fr 1fr; border: none; border-radius: 0; overflow: visible; max-width: 1160px; min-height: 540px; background: transparent; }
.auth-intro { background: #3730a3; border-radius: 16px; padding: 52px 44px 30px; color: #fff; }
.auth-intro h2 { color: #fff; font-size: 3.7rem; font-weight: 650; line-height: 1.04; letter-spacing: -.035em; }
.auth-intro > p { color: #dedcff; font-size: 15px; max-width: 36ch; line-height: 1.7; margin-top: 25px; }
.auth-intro-footer { color: #e4e2ff; margin-top: auto; padding-top: 32px; border: 0; }
.auth-intro-footer span { color: #dedcff; }
.auth-access { padding: 48px 0 48px 64px; display: flex; align-items: center; }
.auth-access-inner { width: 100%; max-width: 370px; margin: auto; }
.auth-access h1 { font-size: 2rem; font-weight: 650; letter-spacing: -.035em; }
.auth-description { margin-top: 8px; margin-bottom: 32px; }
.auth-security { justify-content: flex-start; margin-top: 30px; }
.ticket-create-page { max-width: 1100px; margin-inline: auto; }
.ticket-create-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; }
.ticket-create-heading p { color: var(--ui-muted); font-size: 14px; margin-top: 8px; }
.ticket-back { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-muted); font-size: 13px; min-height: 44px; }
.ticket-back svg, .ticket-compose svg { width: 18px; height: 18px; flex-shrink: 0; }
.ticket-compose { display: grid; grid-template-columns: minmax(0, 1fr) 320px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; overflow: hidden; }
.ticket-editor, .ticket-routing { padding: 28px; min-width: 0; }
.ticket-routing { border-left: 1px solid var(--ui-border); background: var(--ui-bg); }
.ticket-compose h2 { font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.ticket-compose h2 svg { color: var(--ui-muted); }
.ticket-field { margin-bottom: 24px; }
.ticket-field:last-child { margin-bottom: 0; }
.ticket-field label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 9px; }
.ticket-field label span { font-size: 11px; font-weight: 400; color: var(--ui-muted); margin-left: auto; }
.ticket-field input, .ticket-field select, .ticket-field textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--ui-border); border-radius: 7px; font-size: 14px; }
.ticket-field textarea { line-height: 1.7; min-height: 200px; resize: vertical; }
.ticket-field p, .ticket-mail-note p, .ticket-recipient p { color: var(--ui-muted); font-size: 12px; line-height: 1.6; margin-top: 8px; }
.ticket-attachment { padding-top: 20px; border-top: 1px solid var(--ui-border); }
.ticketera-ui .ticket-attachment input { background: transparent; border: 0; padding: 0; font-size: 12px; }
.ticket-mail-note, .ticket-recipient { display: flex; align-items: flex-start; gap: 10px; padding-top: 22px; border-top: 1px solid var(--ui-border); }
.ticket-mail-note svg, .ticket-recipient svg { color: var(--ui-muted); margin-top: 2px; }
.ticket-mail-note strong, .ticket-recipient strong { font-size: 12px; font-weight: 600; }
.ticket-recipient { margin-bottom: 20px; }
.ticket-compose-footer { grid-column: 1 / -1; border-top: 1px solid var(--ui-border); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 28px; }
.ticket-compose-footer > span { display: flex; align-items: center; gap: 8px; color: var(--ui-muted); font-size: 12px; }
.ticket-compose-footer > span svg { width: 14px; height: 14px; }
.ticket-compose-footer > div { display: flex; gap: 20px; align-items: center; }
.ticket-compose-footer button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; font-size: 13px; }
.ticket-compose-footer button[aria-busy="true"] { opacity: .7; cursor: wait; }
@media (hover: hover) and (pointer: fine) { .ticket-back:hover { color: var(--ui-text); } }
@media (max-width: 1100px) { .auth-intro { padding: 40px 32px 28px; } .auth-intro h2 { font-size: 3.2rem; } .auth-access { padding-left: 40px; } .ticket-compose { grid-template-columns: minmax(0, 1fr) 285px; } .ticket-editor, .ticket-routing { padding: 22px; } }
@media (max-width: 767px) {
    .ticketera-ui .auth-shell { display: block; width: calc(100% - 40px); max-width: 410px; min-height: 0; }
    .auth-intro { display: none; }
    .auth-access { padding: 28px 4px; }
    .auth-access h1 { font-size: 1.875rem; }
    .auth-security { justify-content: center; }
    .auth-footer { font-size: 10px; }
    .app-header { height: 64px; }
    .page-content h1 { font-size: 1.5rem; }
    .ticket-create-heading { display: block; margin-bottom: 18px; }
    .ticket-create-heading > a { margin-top: 8px; }
    .ticket-compose { grid-template-columns: minmax(0, 1fr); }
    .ticket-editor, .ticket-routing { padding: 22px 18px; }
    .ticket-routing { border-left: 0; border-top: 1px solid var(--ui-border); }
    .ticket-compose-footer { padding: 18px; flex-wrap: wrap; gap: 12px; }
    .ticket-compose-footer > div { width: 100%; justify-content: space-between; }
    .ticket-compose-footer button { min-height: 44px; }
}

/* Support network: ambient, explicitly requested brand motion; never on form controls. */
.auth-page { --login-panel: #312b88; --login-wire: #ada6ed; --login-ink: #eeeaff; }
.auth-topbar { padding-block: 22px; }
.ticketera-ui .auth-shell { min-height: 540px; margin-block: 10px; grid-template-columns: 1.13fr 1fr; }
.auth-intro { position: relative; padding: 42px 38px 26px; background: var(--login-panel); overflow: hidden; }
.auth-intro h2 { font-size: 4.1rem; line-height: 1.01; }
.auth-intro > p { color: var(--login-ink); max-width: 35ch; font-size: 14px; line-height: 1.7; margin-top: 22px; }
.auth-intro-footer, .auth-intro-footer span { color: var(--login-ink); }
.auth-intro-footer { padding-top: 24px; }
.auth-stage { position: relative; margin: 24px -10px 0; padding-top: 8px; }
.support-network { position: relative; aspect-ratio: 480 / 250; width: 100%; max-width: 420px; margin-inline: auto; }
.network-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.network-wire { stroke: var(--login-wire); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.network-port { fill: var(--login-panel); stroke: #d6d0ff; stroke-width: 1.5; }
.network-signal { fill: #f4f0ff; }
.network-signal.signal-request { animation: signal-request 7s linear infinite; }
.network-signal.signal-equipment { animation: signal-equipment 7s linear infinite; animation-delay: -2.3s; }
.network-signal.signal-follow { animation: signal-follow 7s linear infinite; animation-delay: -4.6s; }
.auth-page.motion-suspended .network-signal { animation-play-state: paused; }
.network-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 24px; display: grid; place-items: center; background: #f1edff; color: #312b88; box-shadow: 0 12px 32px rgb(15 10 58 / .22); }
.network-hub svg { width: 48px; height: 48px; stroke-width: 1.5; }
.network-hub-label { position: absolute; top: calc(50% + 58px); left: 50%; transform: translateX(-50%); color: #f4f0ff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.network-label { position: absolute; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--login-ink); }
.network-label svg { width: 14px; height: 14px; }
.label-request { top: 0; left: 0; }
.label-equipment { bottom: 0; left: 0; }
.label-attention { top: 0; right: 0; }
.label-follow { bottom: 0; right: 0; }
@keyframes signal-request {
    0%, 8% { transform: translate(55px, 42px); opacity: 0; }
    12% { transform: translate(55px, 42px); opacity: 1; }
    30% { transform: translate(142px, 42px); opacity: 1; }
    48% { transform: translate(142px, 125px); opacity: 1; }
    70%, 80% { transform: translate(240px, 125px); opacity: 1; }
    84%, 100% { transform: translate(240px, 125px); opacity: 0; }
}
@keyframes signal-equipment {
    0%, 8% { transform: translate(55px, 208px); opacity: 0; }
    12% { transform: translate(55px, 208px); opacity: 1; }
    30% { transform: translate(142px, 208px); opacity: 1; }
    48% { transform: translate(142px, 125px); opacity: 1; }
    70%, 80% { transform: translate(240px, 125px); opacity: 1; }
    84%, 100% { transform: translate(240px, 125px); opacity: 0; }
}
@keyframes signal-follow {
    0%, 8% { transform: translate(240px, 125px); opacity: 0; }
    12% { transform: translate(240px, 125px); opacity: 1; }
    34% { transform: translate(338px, 125px); opacity: 1; }
    52% { transform: translate(338px, 208px); opacity: 1; }
    72%, 80% { transform: translate(425px, 208px); opacity: 1; }
    84%, 100% { transform: translate(425px, 208px); opacity: 0; }
}
@media (max-width: 1100px) {
    .auth-intro { padding: 36px 28px 24px; }
    .auth-intro h2 { font-size: 3.7rem; }
    .network-hub { width: 76px; height: 76px; border-radius: 20px; }
    .network-hub svg { width: 40px; height: 40px; }
    .network-hub-label { top: calc(50% + 47px); }
}
@media (max-width: 767px) {
    .ticketera-ui .auth-shell { display: flex; flex-direction: column; width: calc(100% - 40px); margin: 4px auto 12px; min-height: 0; }
    .auth-intro { display: block; padding: 14px 20px 18px; border-radius: 14px; }
    .auth-intro > h2, .auth-intro > p, .auth-intro-footer { display: none; }
    .auth-stage { margin: 0; padding-top: 8px; }
    .support-network { max-width: 310px; margin-inline: auto; }
    .network-hub { width: 54px; height: 54px; border-radius: 14px; }
    .network-hub svg { width: 28px; height: 28px; }
    .network-hub-label { display: none; }
    .network-label { font-size: 10px; gap: 4px; }
    .network-label svg { width: 11px; height: 11px; }
    .auth-access { padding: 24px 4px 10px; }
    .auth-access h1 { font-size: 1.75rem; }
    .auth-description { margin-bottom: 22px; }
    .login-form { gap: 16px; }
    .auth-security { margin-top: 22px; }
    .auth-footer { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .network-signal { animation: none !important; opacity: 0; }
}

/* Full-page flowing backdrop, independent of the access form. */
.auth-page { position: relative; isolation: isolate; }
.auth-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; color: var(--ui-accent); }
.auth-backdrop svg { width: 100%; height: 100%; }
.auth-backdrop .backdrop-flow { transform-box: view-box; transform-origin: center; stroke: currentColor; stroke-linecap: round; }
.backdrop-flow-primary { stroke-width: 24px; opacity: .13; animation: login-background-forward 18s cubic-bezier(.77, 0, .175, 1) infinite alternate; }
.backdrop-flow-secondary { stroke-width: 2px; opacity: .24; animation: login-background-return 22s cubic-bezier(.77, 0, .175, 1) infinite alternate; }
.auth-topbar, .auth-shell, .auth-footer { position: relative; z-index: 1; }
.auth-page.motion-suspended .backdrop-flow { animation-play-state: paused; }
@keyframes login-background-forward {
    from { transform: translate(-100px, 55px) rotate(-3deg); }
    to { transform: translate(100px, -55px) rotate(3deg); }
}
@keyframes login-background-return {
    from { transform: translate(90px, -45px) rotate(2deg); }
    to { transform: translate(-90px, 45px) rotate(-2deg); }
}
@media (max-width: 767px) {
    .backdrop-flow-primary { opacity: .1; stroke-width: 18px; }
    .backdrop-flow-secondary { opacity: .18; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-backdrop .backdrop-flow { animation: none !important; }
}

/* Dashboard: a quiet overview, with detail available on demand. */
.dashboard-clean { max-width:1320px; margin-inline:auto; }
.dash-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.dash-heading p,.dash-chart>p,.dash-analysis>p { color:var(--ui-muted); font-size:14px; margin-top:6px; }
.dash-action { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 16px; border-radius:9px; background:var(--ui-accent); color:white; font-size:14px; font-weight:600; white-space:nowrap; }
.dash-action:hover { background:var(--ui-accent-hover); }
.dash-action svg,.dash-disclosure summary svg { width:18px; height:18px; flex-shrink:0; }
.dash-overview { border-block:1px solid var(--ui-border); padding:24px 0 18px; }
.dash-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:0; }
.dash-metrics dt { color:var(--ui-muted); font-size:13px; }
.dash-metrics dd { font-size:32px; font-weight:650; line-height:1.3; margin:8px 0 0; letter-spacing:-.025em; }
.dash-metrics dd.dash-urgent { color:#be123c; }
.dark .dash-metrics dd.dash-urgent { color:#fda4af; }
.dash-secondary { display:flex; gap:12px 28px; flex-wrap:wrap; margin:20px 0 0; }
.dash-secondary>div { display:flex; flex-direction:row-reverse; gap:7px; font-size:13px; }
.dash-secondary dt { color:var(--ui-muted); }.dash-secondary dd { margin:0; font-weight:600; }
.dash-primary-charts { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:36px; margin-top:30px; }
.dash-chart { min-width:0; }.dashboard-clean h2,.dashboard-clean h3 { font-size:16px; font-weight:600; margin:0; }
.dash-chart-plot { height:235px; position:relative; margin-top:22px; }
.dash-data { font-size:12px; color:var(--ui-muted); margin-top:10px; }
.dash-data summary { cursor:pointer; min-height:32px; padding:6px 0; width:fit-content; }
.dash-data dl { max-height:220px; overflow:auto; margin:8px 0; }
.dash-data dl>div,.dash-list>div { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid var(--ui-border); padding:9px 0; }
.dash-data dd,.dash-list dd { margin:0; font-weight:600; }
.dash-quality { margin-top:28px; padding:24px 0; border-block:1px solid var(--ui-border); }
.dash-quality>dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:18px 0 0; }
.dash-quality dt { color:var(--ui-muted); font-size:13px; }.dash-quality dd { margin:4px 0; font-weight:600; font-size:22px; }
.dash-quality dl p { font-size:12px; color:var(--ui-muted); margin:0; }
.dash-analysis { margin-top:28px; }.dash-analysis>p { margin-bottom:16px; }
.dash-disclosure { border-bottom:1px solid var(--ui-border); }
.dash-disclosure>summary { display:flex; align-items:center; gap:12px; padding:18px 0; min-height:56px; cursor:pointer; list-style:none; font-size:14px; font-weight:600; }
.dash-disclosure>summary::-webkit-details-marker { display:none; }
.dash-disclosure>summary>svg:first-child { color:var(--ui-muted); }
.dash-disclosure>summary>svg:last-child { margin-left:auto; color:var(--ui-muted); }
.dash-disclosure[open]>summary>svg:last-child { transform:rotate(180deg); }
.dash-disclosure>summary:hover { color:var(--ui-selected-text); }
.dash-chart-grid,.dash-inventory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; padding:16px 0 32px; }
.dash-list { font-size:14px; margin-top:16px; }.dash-list dt { color:var(--ui-muted); }
@media(max-width:1000px) { .dash-primary-charts { grid-template-columns:minmax(0,1fr); gap:28px; } }
@media(max-width:600px) {
 .dash-heading { align-items:flex-start; flex-direction:column; gap:16px; margin-bottom:24px; }
 .dash-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
 .dash-metrics dd { font-size:28px; }.dash-secondary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .dash-secondary>div { flex-direction:column-reverse; gap:2px; }
 .dash-quality>dl,.dash-chart-grid,.dash-inventory { grid-template-columns:minmax(0,1fr); gap:24px; }
 .dash-quality>dl>div { display:grid; grid-template-columns:1fr auto; gap:4px 16px; }.dash-quality dd { grid-column:2; grid-row:1 / 3; margin:0; }.dash-quality dl p { grid-column:1; }
 .dash-chart-plot { height:220px; }.dash-disclosure>summary { font-size:13px; }
}
.dash-chart-empty { display:flex; align-items:center; justify-content:center; height:100%; color:var(--ui-muted); font-size:13px; text-align:center; }

/* Operational home: direct actions, restrained surfaces, shared shell polish. */
.app-page .app-header { height:64px; }
.app-page #sidebar > div:first-of-type { height:64px; }
.app-page #sidebar nav { padding:16px 10px; }
.app-page #sidebar nav a { min-height:40px; border-radius:8px; }
.app-page #sidebar nav a[aria-current="page"] { background:var(--ui-selected); color:var(--ui-selected-text); box-shadow:none; }
.app-page .page-content { padding:28px 32px; }
.dashboard-clean { max-width:1360px; margin-inline:auto; }
.dash-heading { margin-bottom:24px; }
.dash-heading h1 { font-size:28px; font-weight:700; }
.dash-browse { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:13px; font-weight:600; color:var(--ui-muted); }
.dash-browse svg { width:16px; height:16px; }
.dash-shortcuts { display:flex; flex-wrap:wrap; gap:0; padding:8px; border:1px solid var(--ui-border); background:var(--ui-surface); border-radius:12px; margin-bottom:28px; }
.dash-shortcuts>a { display:flex; align-items:center; gap:12px; padding:14px; flex:1 1 190px; min-width:0; min-height:76px; border-radius:8px; }
.dash-shortcuts>a>svg:first-child { width:20px; height:20px; color:var(--ui-selected-text); flex-shrink:0; }
.dash-shortcuts>a>svg:last-child { width:15px; height:15px; color:var(--ui-muted); margin-left:auto; flex-shrink:0; }
.dash-shortcuts strong { display:block; font-size:14px; font-weight:600; }
.dash-shortcuts small { display:block; color:var(--ui-muted); font-size:12px; margin-top:3px; }
.dash-section-title { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.dash-section-title>span { font-size:12px; color:var(--ui-muted); }
.dash-overview { border-top:0; padding-top:0; padding-bottom:22px; }
.dash-metrics dd { font-size:34px; margin-top:4px; }
.dash-metrics>div>a { display:inline-flex; align-items:center; gap:6px; font-size:12px; min-height:36px; color:var(--ui-selected-text); }
.dash-metrics>div>a svg { width:13px; height:13px; }
.dash-secondary { padding-top:12px; margin-top:12px; }
.dash-primary-charts { gap:20px; margin-top:24px; }
.dash-primary-charts>.dash-chart { padding:22px; background:var(--ui-surface); border:1px solid var(--ui-border); border-radius:12px; }
.dash-primary-charts .dash-chart-plot { height:190px; }
.dash-chart-empty { flex-direction:column; gap:16px; padding:20px; max-width:38ch; margin-inline:auto; line-height:1.7; }
.dash-chart-empty::before { content:''; display:block; width:48px; height:34px; border-bottom:2px solid var(--ui-border); background:linear-gradient(to top,var(--ui-border) 45%,transparent 45%) 0 100%/10px 100% no-repeat,linear-gradient(to top,var(--ui-border) 80%,transparent 80%) 19px 100%/10px 100% no-repeat,linear-gradient(to top,var(--ui-border) 60%,transparent 60%) 38px 100%/10px 100% no-repeat; }
.dash-quality { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:start; gap:24px; margin-top:24px; }
.dash-quality>dl { margin:0; }
.dash-quality dd { font-size:24px; }
.dash-analysis { margin-top:26px; }
.dash-data summary { min-height:44px; padding-block:12px; }
@media (hover:hover) and (pointer:fine) {
 .dash-shortcuts>a:hover { background:var(--ui-subtle); }
 .dash-browse:hover,.dash-metrics>div>a:hover { text-decoration:underline; }
}
@media (min-width:1024px) {
 .app-page #sidebar { width:224px; }
 .app-page #mainArea { margin-left:224px; }
 body.sidebar-collapsed #sidebar { width:76px; }
 body.sidebar-collapsed #mainArea { margin-left:76px; }
}
@media (max-width:1100px) { .dash-quality { grid-template-columns:1fr; gap:16px; } }
@media (max-width:767px) {
 .app-page .page-content { padding:24px 16px; }
 .dash-shortcuts>a { flex-basis:calc(50% - 8px); padding:12px 8px; gap:8px; }
 .dash-shortcuts small { display:none; }
 .dash-shortcuts>a>svg:last-child { display:none; }
 .dash-shortcuts { padding:4px; }
 .dash-shortcuts strong { font-size:13px; }
 .dash-primary-charts>.dash-chart { padding:18px; }
 .dash-heading h1 { font-size:25px; }
 .dash-quality>dl { gap:18px; }
}