/* Capix Admin — sistema visual (obsidiana + carmesí + cromo) */
:root {
  --bg: #07070a; --bg2: #0d0d12; --panel: rgba(255,255,255,.035); --panel2: rgba(255,255,255,.065); --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.16);
  --ink: #f4f4f7; --ink2: #c6c6d0; --mut: #8b8b98; --acc: #ff2a3d; --acc2: #ff7a59; --accrgb: 255,42,61; --ok: #2ee59d; --warn: #ffb020; --bad: #ff5470; --info: #4aa8ff;
  --r: 18px; --rs: 12px; --ease: cubic-bezier(.22,1,.36,1); --sbw: 264px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable", "Segoe UI", Roboto, sans-serif; --mono: "SF Mono", ui-monospace, Consolas, monospace;
  --shadow: 0 30px 80px -30px rgba(0,0,0,.8); color-scheme: dark;
}
:root[data-theme="light"] { --bg: #f3f4f8; --bg2: #ffffff; --panel: rgba(0,0,0,.03); --panel2: rgba(0,0,0,.06); --line: rgba(0,0,0,.09); --line2: rgba(0,0,0,.17); --ink: #14141a; --ink2: #3a3a46; --mut: #6b6b78; --shadow: 0 30px 70px -35px rgba(0,0,0,.35); color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; line-height: 1.15; } p { margin: 0; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 8px; }
::selection { background: rgba(var(--accrgb), .35); }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
.mono { font-family: var(--mono); } .mut { color: var(--mut); } .ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); } .hide { display: none !important; } .right { margin-left: auto; } .grow { flex: 1; min-width: 0; } .nowrap { white-space: nowrap; }
.row { display: flex; align-items: center; gap: 10px; } .col { display: flex; flex-direction: column; gap: 10px; } .wrap { flex-wrap: wrap; } .gap6 { gap: 6px; } .gap16 { gap: 16px; }
svg.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Fondo ---------- */
.bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 500px at 85% -10%, rgba(var(--accrgb), .14), transparent 60%), radial-gradient(700px 500px at -5% 100%, rgba(74,168,255,.08), transparent 60%), var(--bg); }
:root[data-theme="light"] .bgfx { background: radial-gradient(900px 500px at 85% -10%, rgba(var(--accrgb), .08), transparent 60%), var(--bg); }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: var(--sbw) 1fr; min-height: 100vh; }
.sb { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 12px 20px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 14px; z-index: 40; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 10px; font-weight: 800; letter-spacing: .02em; }
.brand .logo { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, var(--acc), var(--acc2)); display: grid; place-items: center; color: #fff; box-shadow: 0 8px 24px -8px rgba(var(--accrgb), .8); font-weight: 900; }
.brand small { display: block; font-weight: 500; color: var(--mut); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.nav-g { display: grid; gap: 2px; } .nav-h { padding: 10px 12px 4px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); font-weight: 700; }
.nav-i { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 12px; color: var(--ink2); font-size: .92rem; transition: .2s; position: relative; }
.nav-i:hover { background: var(--panel2); color: var(--ink); } .nav-i.on { background: rgba(var(--accrgb), .13); color: var(--ink); } .nav-i.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--acc); }
.nav-i .badge { margin-left: auto; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(20px); }
.top .title { font-weight: 700; font-size: 1.05rem; }
.content { padding: 24px; max-width: 1640px; width: 100%; margin: 0 auto; }
.page-h { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .page-h h1 { font-size: 1.7rem; } .page-h p { color: var(--mut); margin-top: 4px; }
.searchbtn { display: flex; align-items: center; gap: 10px; min-width: 240px; padding: 9px 14px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); color: var(--mut); font-size: .9rem; transition: .2s; } .searchbtn:hover { border-color: var(--line2); color: var(--ink); }
.kbd { font-family: var(--mono); font-size: .7rem; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line2); color: var(--mut); }
.iconbtn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); transition: .2s; position: relative; } .iconbtn:hover { background: var(--panel2); border-color: var(--line2); }
.iconbtn .dot { position: absolute; top: 6px; right: 7px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--acc); color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.menu-btn { display: none; }

/* ---------- Componentes ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; position: relative; }
.card.glass { backdrop-filter: blur(14px); } .card h3 { font-size: 1rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .card h3 .mut { font-weight: 500; font-size: .8rem; margin-left: auto; }
.grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } .g12 { grid-template-columns: repeat(12, 1fr); } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 12px; font-weight: 600; font-size: .9rem; border: 1px solid var(--line2); background: var(--panel); transition: .2s var(--ease); white-space: nowrap; } .btn:hover { background: var(--panel2); transform: translateY(-1px); } .btn:active { transform: none; }
.btn.pri { background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #fff; border-color: transparent; box-shadow: 0 10px 28px -12px rgba(var(--accrgb), .9); } .btn.pri:hover { filter: brightness(1.08); }
.btn.dng { color: var(--bad); border-color: rgba(255,84,112,.4); } .btn.sm { padding: 6px 12px; font-size: .82rem; border-radius: 10px; } .btn.ghost { background: transparent; } .btn[disabled] { opacity: .45; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-size: .8rem; font-weight: 600; border: 1px solid var(--line2); background: var(--panel); transition: .2s; } button.chip:hover { border-color: var(--acc); } .chip.on { background: var(--acc); color: #fff; border-color: var(--acc); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: .72rem; font-weight: 700; background: var(--panel2); color: var(--ink2); white-space: nowrap; } .badge.ok { background: rgba(46,229,157,.14); color: var(--ok); } .badge.warn { background: rgba(255,176,32,.14); color: var(--warn); } .badge.bad { background: rgba(255,84,112,.14); color: var(--bad); } .badge.info { background: rgba(74,168,255,.14); color: var(--info); } .badge.acc { background: rgba(var(--accrgb), .16); color: var(--acc); }
.dot-s { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.inp, .sel, .ta { width: 100%; padding: 10px 14px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line2); outline: none; transition: border-color .2s, box-shadow .2s; } .inp:focus, .sel:focus, .ta:focus { border-color: var(--acc); box-shadow: 0 0 0 4px rgba(var(--accrgb), .15); } .ta { min-height: 96px; resize: vertical; }
.fld { display: grid; gap: 6px; } .fld > label, .lbl { font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: var(--mut); text-transform: uppercase; } .fld .hint { font-size: .78rem; color: var(--mut); } .fld.bad .inp, .fld.bad .sel { border-color: var(--bad); }
.switch { width: 44px; height: 26px; border-radius: 99px; background: var(--line2); position: relative; transition: .25s; flex: none; } .switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .25s var(--ease); } .switch[aria-checked="true"] { background: var(--acc); } .switch[aria-checked="true"]::after { transform: translateX(18px); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .78rem; flex: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); } .avatar.lg { width: 72px; height: 72px; font-size: 1.5rem; } .avatar.sm { width: 26px; height: 26px; font-size: .65rem; }
.empty { text-align: center; padding: 50px 20px; color: var(--mut); } .empty .i { width: 40px; height: 40px; opacity: .4; margin-bottom: 10px; }
.skeleton { background: linear-gradient(90deg, var(--panel) 25%, var(--panel2) 50%, var(--panel) 75%); background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: 10px; } @keyframes sk { to { background-position: -200% 0; } }
.progress { height: 8px; border-radius: 4px; background: var(--line2); overflow: hidden; } .progress i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--acc), var(--acc2)); transition: width .6s var(--ease); }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); width: max-content; max-width: 100%; overflow: auto; } .tabs button { padding: 7px 14px; border-radius: 10px; font-weight: 600; font-size: .86rem; color: var(--mut); white-space: nowrap; } .tabs button.on { background: var(--panel2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); }

/* ---------- KPI ---------- */
.kpi { display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .kpi .lbl { display: flex; align-items: center; gap: 8px; } .kpi .val { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .kpi .sub { font-size: .8rem; color: var(--mut); } .kpi canvas { width: 100%; height: 46px; margin-top: 6px; }
.kpi .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(var(--accrgb), .14); color: var(--acc); margin-left: auto; }
.delta.up { color: var(--ok); } .delta.dn { color: var(--bad); }

/* ---------- Tablas ---------- */
.tw { overflow: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); }
table.t { width: 100%; border-collapse: collapse; font-size: .9rem; } .t th { position: sticky; top: 0; background: color-mix(in srgb, var(--bg2) 92%, transparent); text-align: left; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: default; user-select: none; } .t th.sort { cursor: pointer; } .t th.sort:hover { color: var(--ink); }
.t td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t tr:last-child td { border-bottom: 0; } .t tbody tr { cursor: pointer; transition: background .15s; } .t tbody tr:hover td { background: var(--panel); } .t td.num, .t th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; gap: 10px; padding: 12px 4px; color: var(--mut); font-size: .85rem; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.tb-search { position: relative; flex: 1; min-width: 200px; max-width: 380px; } .tb-search .inp { padding-left: 38px; border-radius: 99px; } .tb-search .i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--mut); }

/* ---------- Kanban ---------- */
.kb { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; } .kcol { flex: 0 0 290px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; max-height: calc(100vh - 240px); }
.kcol > h4 { padding: 14px 16px 10px; font-size: .82rem; display: flex; align-items: center; gap: 8px; } .kcol .cnt { margin-left: auto; color: var(--mut); font-weight: 600; } .kcol .body { padding: 0 10px 10px; overflow-y: auto; display: grid; gap: 8px; min-height: 60px; } .kcol.over { outline: 2px dashed var(--acc); outline-offset: -4px; }
.kcard { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: grab; transition: .2s var(--ease); display: grid; gap: 8px; } .kcard:hover { border-color: var(--line2); transform: translateY(-2px); } .kcard.drag { opacity: .4; } .kcard .t { font-weight: 600; font-size: .9rem; line-height: 1.3; } .kcard .m { display: flex; gap: 6px; flex-wrap: wrap; font-size: .76rem; color: var(--mut); align-items: center; }

/* ---------- Overlays ---------- */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; } .scrim.open { opacity: 1; }
.modal { position: fixed; z-index: 100; left: 50%; top: 50%; width: min(var(--mw, 640px), calc(100vw - 28px)); max-height: calc(100vh - 40px); overflow: auto; background: var(--bg2); border: 1px solid var(--line2); border-radius: 26px; box-shadow: var(--shadow); padding: 26px; transform: translate(-50%, -48%) scale(.97); opacity: 0; transition: .3s var(--ease); } .modal.open { transform: translate(-50%, -50%); opacity: 1; }
.drawer { position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; width: min(var(--dw, 620px), 100vw); background: var(--bg2); border-left: 1px solid var(--line2); box-shadow: var(--shadow); transform: translateX(105%); transition: transform .4s var(--ease); display: flex; flex-direction: column; } .drawer.open { transform: none; }
.drawer > header { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); } .drawer > .body { padding: 22px; overflow: auto; flex: 1; display: grid; gap: 18px; align-content: start; } .drawer > footer { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.modal h2 { font-size: 1.35rem; margin-bottom: 6px; } .modal .sub { color: var(--mut); margin-bottom: 18px; }
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: grid; gap: 10px; } .toast { min-width: 260px; max-width: 380px; padding: 13px 16px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line2); box-shadow: var(--shadow); display: flex; gap: 10px; align-items: flex-start; animation: tin .4s var(--ease); } .toast.err { border-color: rgba(255,84,112,.5); } .toast.ok { border-color: rgba(46,229,157,.5); } @keyframes tin { from { transform: translateY(14px); opacity: 0; } }
.pal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; padding-top: 12vh; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); } .pal .box { width: min(680px, calc(100vw - 24px)); background: var(--bg2); border: 1px solid var(--line2); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; } .pal input { width: 100%; padding: 20px 24px; background: none; border: 0; border-bottom: 1px solid var(--line); outline: none; font-size: 1.1rem; color: var(--ink); } .pal .res { max-height: 50vh; overflow: auto; padding: 8px; } .pal .it { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; cursor: pointer; } .pal .it.sel { background: var(--panel2); } .pal .it small { margin-left: auto; color: var(--mut); }
.menu { position: absolute; z-index: 60; min-width: 220px; background: var(--bg2); border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--shadow); padding: 6px; } .menu button, .menu a { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 12px; border-radius: 10px; text-align: left; font-size: .9rem; } .menu button:hover, .menu a:hover { background: var(--panel2); }

/* ---------- Timeline / pasos ---------- */
.tl { display: grid; gap: 0; } .tl .ev { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-bottom: 18px; position: relative; } .tl .ev::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: var(--line2); } .tl .ev:last-child::before { display: none; } .tl .pt { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line2); background: var(--bg2); display: grid; place-items: center; margin-top: 1px; } .tl .ev.done .pt { background: var(--acc); border-color: var(--acc); color: #fff; } .tl .ev.cur .pt { border-color: var(--acc); box-shadow: 0 0 0 5px rgba(var(--accrgb), .2); } .tl .ev .pt .i { width: 12px; height: 12px; stroke-width: 3; }
.stepper { display: flex; gap: 0; align-items: center; overflow-x: auto; padding: 6px 2px 12px; } .stepper .st { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 96px; position: relative; flex: 1; text-align: center; font-size: .72rem; color: var(--mut); } .stepper .st::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 3px; background: var(--line2); z-index: 0; } .stepper .st:first-child::before { display: none; } .stepper .st .d { width: 28px; height: 28px; border-radius: 50%; background: var(--bg2); border: 3px solid var(--line2); z-index: 1; display: grid; place-items: center; } .stepper .st.done .d { background: var(--acc); border-color: var(--acc); color: #fff; } .stepper .st.done::before { background: var(--acc); } .stepper .st.cur .d { border-color: var(--acc); box-shadow: 0 0 0 6px rgba(var(--accrgb), .2); } .stepper .st.cur { color: var(--ink); font-weight: 700; } .stepper .st .d .i { width: 14px; height: 14px; stroke-width: 3; }

/* ---------- Mapa ---------- */
.mapbox { position: relative; border-radius: var(--r); overflow: hidden; background: radial-gradient(ellipse at 50% 40%, rgba(74,168,255,.07), transparent 70%), var(--bg2); border: 1px solid var(--line); } .mapbox svg { width: 100%; height: auto; display: block; }
.land { fill: color-mix(in srgb, var(--ink) 8%, transparent); stroke: color-mix(in srgb, var(--ink) 28%, transparent); stroke-width: .6; } .land2 { fill: color-mix(in srgb, var(--ink) 4%, transparent); stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-width: .5; } .route { fill: none; stroke: var(--acc); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: .5; } .route.sel { opacity: 1; stroke-width: 2; } .route.done { stroke-dasharray: none; opacity: .9; stroke: var(--ok); }
.truck { transition: transform .6s linear; } .pin { fill: var(--acc); } .pin-ring { fill: none; stroke: var(--acc); animation: ring 2.2s infinite; transform-box: fill-box; transform-origin: center; } @keyframes ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.maplist { display: grid; gap: 8px; max-height: 520px; overflow: auto; } .mi { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); cursor: pointer; transition: .2s; } .mi:hover, .mi.sel { border-color: var(--acc); }

/* ---------- Varios ---------- */
.org { display: flex; flex-direction: column; align-items: center; gap: 24px; overflow: auto; padding: 10px; } .org ul { display: flex; gap: 18px; padding: 0; margin: 0; list-style: none; justify-content: center; } .org li { display: flex; flex-direction: column; align-items: center; gap: 18px; position: relative; } .org .node { padding: 10px 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line2); min-width: 170px; text-align: center; font-size: .82rem; cursor: pointer; } .org .node:hover { border-color: var(--acc); } .org .node b { display: block; font-size: .9rem; }
.matrix { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); max-height: 70vh; } .matrix table { border-collapse: separate; border-spacing: 0; font-size: .78rem; } .matrix th, .matrix td { padding: 6px 8px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; white-space: nowrap; } .matrix th { position: sticky; top: 0; background: var(--bg2); z-index: 2; font-weight: 700; } .matrix td:first-child, .matrix th:first-child { position: sticky; left: 0; background: var(--bg2); z-index: 3; text-align: left; font-weight: 600; min-width: 200px; } .mx { display: inline-block; min-width: 22px; padding: 1px 5px; border-radius: 6px; font-weight: 700; font-size: .7rem; } .mx.A { background: rgba(46,229,157,.18); color: var(--ok); } .mx.D { background: rgba(74,168,255,.18); color: var(--info); } .mx.P { background: rgba(255,176,32,.18); color: var(--warn); }
.doc { background: #fff; color: #111; border-radius: 14px; padding: 40px; font-size: .92rem; max-width: 820px; margin: auto; box-shadow: var(--shadow); } .doc h1 { font-size: 1.6rem; color: #111; } .doc table { width: 100%; border-collapse: collapse; margin: 18px 0; } .doc th { text-align: left; border-bottom: 2px solid #111; padding: 8px 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; } .doc td { padding: 8px 6px; border-bottom: 1px solid #ddd; } .doc .r { text-align: right; } .doc .tot { font-size: 1.2rem; font-weight: 800; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; } .login .card { width: min(440px, 100%); padding: 34px; border-radius: 28px; box-shadow: var(--shadow); } .login h1 { font-size: 1.7rem; margin: 16px 0 6px; } .login .logo { width: 54px; height: 54px; border-radius: 18px; background: linear-gradient(135deg, var(--acc), var(--acc2)); display: grid; place-items: center; font-size: 1.6rem; font-weight: 900; color: #fff; box-shadow: 0 16px 40px -14px rgba(var(--accrgb), .9); }
.qr { background: #fff; padding: 12px; border-radius: 16px; width: max-content; margin: 8px auto; } .qr svg { display: block; width: 200px; height: 200px; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-family: var(--mono); font-size: .95rem; padding: 14px; background: var(--panel); border: 1px dashed var(--line2); border-radius: 14px; }
.lines { display: grid; gap: 8px; } .lines .ln { display: grid; grid-template-columns: 1fr 70px 100px 60px 28px; gap: 8px; align-items: center; } .lines .ln .inp { padding: 8px 10px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--mut); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.cv { width: 100%; display: block; } .tip { position: fixed; z-index: 120; pointer-events: none; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: .78rem; font-weight: 600; transform: translate(-50%, -120%); white-space: nowrap; }
.sec-ok { color: var(--ok); } .hbar { display: grid; grid-template-columns: 130px 1fr 70px; gap: 10px; align-items: center; font-size: .85rem; margin: 6px 0; } .hbar .bar { height: 10px; border-radius: 5px; background: var(--line2); overflow: hidden; } .hbar .bar i { display: block; height: 100%; border-radius: 5px; }
.bell-list { width: 380px; max-height: 70vh; overflow: auto; } .nt { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; cursor: pointer; } .nt:hover { background: var(--panel2); } .nt.un { background: rgba(var(--accrgb), .08); }
.print-only { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) { .g4 { grid-template-columns: repeat(2, 1fr); } .s4, .s5, .s6, .s7, .s8 { grid-column: span 12; } .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .sb { position: fixed; left: 0; top: 0; width: 280px; transform: translateX(-105%); transition: transform .35s var(--ease); background: var(--bg2); } .sb.open { transform: none; box-shadow: var(--shadow); } .menu-btn { display: grid; } .g2, .g3, .g4 { grid-template-columns: 1fr; } .content { padding: 16px; } .top { padding: 10px 14px; } .searchbtn { min-width: 0; } .searchbtn span, .searchbtn .kbd { display: none; } .lines .ln { grid-template-columns: 1fr 60px 80px 28px; } .lines .ln .tx { display: none; } .bell-list { width: 92vw; } }
@media print { .sb, .top, .bgfx, .toasts, .no-print { display: none !important; } body { background: #fff; } .content { padding: 0; max-width: none; } .doc { box-shadow: none; padding: 0; } .app { display: block; } .print-only { display: block; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
.menu.ctx { z-index: 400; min-width: 240px; animation: ctxin .12s ease-out; } .menu.ctx button:disabled { opacity: .4; cursor: default; } .menu.ctx button:focus-visible { background: var(--panel2); outline: 0; } .menu.ctx small { font-size: .72rem; }
@keyframes ctxin { from { opacity: 0; transform: scale(.97); } }