/* =============================================================================
* A-Airsoft — FOUNDATION (única fuente de estilos de la web). Tokens ao-* +
* primitivos del design system (login, shell, cards, table, forms, buttons).
* CRT táctico. Sin build step (static, servido desde /public/css). Los mismos
* valores de token viven en el móvil (mobile/src/theme/tokens.ts).
* ============================================================================= */
:root {
--ao-bg: #03070a;
--ao-panel: #0a130c;
--ao-panel2: #070f09;
--ao-border: #3c5238;
--ao-border-soft: #1f3a28;
--ao-fg: #e8f4ec;
--ao-ink: #8ef0b0;
--ao-dim: #6b8a5e;
--ao-faint: #2f7a4a;
--ao-green: #57f08a;
--ao-amber: #d9a441;
--ao-danger: #c63a2e;
--ao-danger-ink: #ff7a6a;
/* JetBrains Mono: legible at small sizes (the old Share Tech Mono was hard to
read at 9–11px). The green-on-black CRT feel comes from the palette + scanlines. */
--ao-mono: 'JetBrains Mono', 'Share Tech Mono', monospace;
--ao-display: 'Chakra Petch', sans-serif;
}
/* ---- light theme (claro). Activar con . Default = dark. ---- */
:root[data-theme="light"] {
--ao-bg: #e9efe9;
--ao-panel: #ffffff;
--ao-panel2: #f2f6f2;
--ao-border: #c3d1c3;
--ao-border-soft: #d9e3d9;
--ao-fg: #0f2218;
--ao-ink: #1b7a42;
--ao-dim: #5a6f60;
--ao-faint: #7f9a87;
--ao-green: #1f9d52;
--ao-amber: #a9781f;
--ao-danger: #c1352a;
--ao-danger-ink: #c1352a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* Background on the canvas (html) so the ultra-wide gutter (body::before,
z-index -1) shows through the transparent body beyond the 1920px shell cap. */
html { background: var(--ao-bg); }
body {
background: transparent;
color: var(--ao-fg);
font-family: var(--ao-display);
font-size: 14px;
}
/* ---- Scrollbars (system-wide, CRT palette). Both themes adapt via tokens.
Firefox: scrollbar-width/color on the root. WebKit/Blink: ::-webkit-* below.
The designer scopes its own (.ao-designer/.ao-map) but inherits these too. ---- */
* { scrollbar-width: thin; scrollbar-color: var(--ao-border) var(--ao-panel2); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ao-panel2); }
::-webkit-scrollbar-corner { background: var(--ao-panel2); }
::-webkit-scrollbar-thumb {
background: var(--ao-border);
border: 2px solid var(--ao-panel2); /* inset look */
border-radius: 0; /* squared = CRT */
}
::-webkit-scrollbar-thumb:hover { background: var(--ao-faint); }
::-webkit-scrollbar-thumb:active { background: var(--ao-green); }
/* Ultra-wide gutter (brought from Beacon): beyond the 1920px shell cap the
shell pins left and this paints a decorative fill on the right. body::after
is taken by the scanline, so the gutter rides body::before. Only beyond the
cap — at ≤1920 it must not exist (would shift viewport-centered pages). */
@media (min-width: 1921px) {
body::before {
content: ''; position: fixed; top: 0; bottom: 0; left: 1920px; right: 0;
z-index: -1; pointer-events: none;
background-image:
radial-gradient(rgba(87,240,138,.06) 1px, transparent 1px),
linear-gradient(to right, transparent, rgba(0,0,0,.22));
background-size: 14px 14px, 100% 100%;
border-left: 1px solid var(--ao-border);
box-shadow: inset 24px 0 44px -24px rgba(0,0,0,.45);
}
:root[data-theme="light"] body::before {
background-image:
radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(to right, transparent, rgba(0,0,0,.06));
}
}
a { color: var(--ao-ink); text-decoration: none; }
.mono { font-family: var(--ao-mono); }
.dim { color: var(--ao-dim); }
.faint { color: var(--ao-faint); }
/* scanline overlay (solo en oscuro) */
body::after {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999;
background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,26,12,.25) 3px 4px);
}
:root[data-theme="light"] body::after { display: none; }
/* theme toggle */
.ao-tgl { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--ao-border); color: var(--ao-dim); font-family: var(--ao-mono); font-size: 11px; letter-spacing: 1px; line-height: 1; padding: 7px 11px; cursor: pointer; }
.ao-tgl:hover { color: var(--ao-ink); border-color: var(--ao-ink); }
.ao-tgl svg { display: block; }
/* lang switch */
.ao-lang { display: inline-flex; gap: 5px; align-items: center; }
.ao-lang a { font-family: var(--ao-mono); font-size: 10px; letter-spacing: 1px; color: var(--ao-dim); border: 1px solid var(--ao-border); padding: 6px 7px; }
.ao-lang a.on { color: var(--ao-green); border-color: var(--ao-green); }
.ao-lang a:hover { color: var(--ao-ink); }
/* ---- login ---- */
/* Cap to the same 1920 band as the shell (pin left) so on ultra-wide the login
box centers with the app, not in the middle of the whole screen. */
.ao-login { min-height: 100vh; max-width: 1920px; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ao-login-box { width: 380px; max-width: 100%; }
.ao-emblem { text-align: center; margin-bottom: 22px; }
.ao-emblem .mark {
width: 86px; height: 86px; border-radius: 50%; border: 1px solid var(--ao-border);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 6px rgba(87,240,138,.06);
}
.ao-emblem .mark span { font-family: var(--ao-display); font-weight: 700; font-size: 24px; color: var(--ao-ink); }
.ao-title { font-family: var(--ao-display); font-weight: 700; font-size: 28px; letter-spacing: 5px; text-align: center; }
.ao-tagline { font-family: var(--ao-mono); font-size: 10px; letter-spacing: 3px; color: var(--ao-faint); text-align: center; margin-top: 6px; }
.ao-badge { font-family: var(--ao-mono); font-size: 10px; letter-spacing: 2px; text-align: center; margin: 10px 0 24px; }
.ao-badge.admin { color: var(--ao-amber); }
.ao-badge.portal { color: var(--ao-green); }
/* ---- form ---- */
.ao-field { margin-bottom: 15px; }
.ao-label { display: block; font-family: var(--ao-mono); font-size: 10px; letter-spacing: 2px; color: var(--ao-dim); margin-bottom: 7px; }
.ao-input {
width: 100%; background: var(--ao-panel); border: 1px solid var(--ao-border);
color: var(--ao-ink); font-family: var(--ao-mono); font-size: 14px; padding: 11px 13px;
/* Render native parts (number spinner, date picker, select arrow) in dark
mode so they match the CRT theme instead of a bright box on black. */
color-scheme: dark;
}
:root[data-theme="light"] .ao-input { color-scheme: light; }
/* Always show the number spinner and separate it with a hairline. The arrows
follow color-scheme (dark theme) — native glyph colour isn't restylable. */
.ao-input[type="number"]::-webkit-inner-spin-button,
.ao-input[type="number"]::-webkit-outer-spin-button {
opacity: 1; cursor: pointer; margin-left: 6px;
border-left: 1px solid var(--ao-border-soft);
}
.ao-input:focus { outline: none; border-color: var(--ao-green); }
.ao-btn {
width: 100%; background: var(--ao-green); color: #03120a; border: none;
font-family: var(--ao-display); font-weight: 700; font-size: 15px; letter-spacing: 3px;
padding: 13px; cursor: pointer;
}
.ao-btn.amber { background: var(--ao-amber); }
.ao-btn-ghost { background: transparent; border: 1px solid var(--ao-danger); color: var(--ao-danger-ink); width: auto; padding: 8px 16px; font-size: 12px; letter-spacing: 2px; cursor: pointer; }
.ao-error { font-family: var(--ao-mono); font-size: 12px; color: var(--ao-danger-ink); margin-bottom: 10px; }
.ao-secure { text-align: center; font-family: var(--ao-mono); font-size: 10px; letter-spacing: 2px; color: var(--ao-faint); margin-top: 16px; }
/* ---- shell ---- */
/* Cap on ultra-wide monitors (brought from Beacon): pin left, gutter on the right. */
.ao-shell { display: flex; min-height: 100vh; max-width: 1920px; margin-inline: 0; }
.ao-side { width: 220px; flex: none; border-right: 1px solid var(--ao-border-soft); background: var(--ao-panel2); padding: 18px 0; }
.ao-side .brand { padding: 0 18px 18px; font-family: var(--ao-display); font-weight: 700; letter-spacing: 3px; color: var(--ao-fg); }
.ao-side .brand small { display: block; font-family: var(--ao-mono); font-size: 10px; letter-spacing: 2px; color: var(--ao-faint); font-weight: 400; }
.ao-nav a { display: block; padding: 11px 18px; font-family: var(--ao-mono); font-size: 12px; letter-spacing: 1px; color: var(--ao-dim); border-left: 2px solid transparent; }
.ao-nav a:hover { color: var(--ao-ink); }
.ao-nav a.active { color: var(--ao-green); border-left-color: var(--ao-green); background: rgba(87,240,138,.05); }
/* Sidebar dividers: same tactical placard, full-width band edge-to-edge (no
side margin/border, text aligned with the nav links at 18px). */
.ao-nav-section {
margin: 15px 0 6px; padding: 6px 18px;
font-family: var(--ao-mono); font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--ao-dim);
border: 1px solid var(--ao-border-soft); border-left: 0; border-right: 0;
background-color: var(--ao-panel);
background-image: repeating-linear-gradient(135deg, rgba(87,240,138,.13) 0 1px, transparent 1px 6px);
}
.ao-nav-section:first-child { margin-top: 4px; }
.ao-check { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ao-mono); font-size: 12px; color: var(--ao-dim); cursor: pointer; }
.ao-check input { accent-color: var(--ao-green); }
/* portal preview ("portal hat") banner */
.ao-hat { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 22px; background: rgba(240,180,0,.12); border-bottom: 1px solid var(--ao-amber); font-family: var(--ao-mono); font-size: 11px; letter-spacing: 1px; color: var(--ao-amber); }
.ao-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ao-top { height: 52px; border-bottom: 1px solid var(--ao-border-soft); display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
.ao-top .crumb { font-family: var(--ao-display); font-weight: 600; letter-spacing: 1px; }
.ao-top .who { font-family: var(--ao-mono); font-size: 11px; color: var(--ao-dim); display: flex; gap: 14px; align-items: center; }
.ao-content { padding: 22px; flex: 1; }
/* ---- cards / kpis ---- */
.ao-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.ao-card { border: 1px solid var(--ao-border); background: var(--ao-panel); padding: 14px 16px; }
.ao-card .k { font-family: var(--ao-mono); font-size: 10px; letter-spacing: 2px; color: var(--ao-dim); }
.ao-card .v { font-family: var(--ao-mono); font-size: 28px; font-weight: 700; color: var(--ao-green); margin-top: 6px; }
.ao-card .v.amber { color: var(--ao-amber); }
/* Section header as a tactical placard: diagonal hatch band spanning the full
available width (display:flex, not inline). */
.ao-section {
display: flex; align-items: center;
font-family: var(--ao-mono); font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--ao-dim);
margin: 8px 0 12px; padding: 6px 12px;
border: 1px solid var(--ao-border-soft);
background-color: var(--ao-panel2);
background-image: repeating-linear-gradient(135deg, rgba(87,240,138,.13) 0 1px, transparent 1px 6px);
}
/* ---- cards (design system) ---- */
/* `.ao-card` = simple tile (KPIs). `.ao-card.is-split` = headed card (head+body
* own the padding). Tables/forms drop into a split card flush. */
.ao-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 22px; }
.ao-card.is-split { padding: 0; }
.ao-card-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 16px; border-bottom: 1px solid var(--ao-border-soft);
font-family: var(--ao-mono); font-size: 10px; letter-spacing: 2px; color: var(--ao-dim);
}
.ao-card-head .t { color: var(--ao-ink); }
.ao-card-body { padding: 16px; }
.ao-card.is-split > .ao-table { border: 0; }
.ao-card.is-split > .ao-table th:first-child,
.ao-card.is-split > .ao-table td:first-child { padding-left: 16px; }
.ao-card.is-split > .ao-table th:last-child,
.ao-card.is-split > .ao-table td:last-child { padding-right: 16px; }
.ao-empty { padding: 30px 16px; text-align: center; font-family: var(--ao-mono); font-size: 12px; color: var(--ao-dim); }
.ao-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ao-stack { display: flex; flex-direction: column; gap: 8px; }
/* soft depth — barely-there on dark (border carries it), real on light */
.ao-card, .ao-table, .ao-pick { box-shadow: 0 1px 2px rgba(0,0,0,.18); }
:root[data-theme="light"] .ao-card,
:root[data-theme="light"] .ao-table,
:root[data-theme="light"] .ao-pick { box-shadow: 0 1px 3px rgba(16,40,30,.07), 0 4px 14px -8px rgba(16,40,30,.12); }
/* ---- pick (selectable card, e.g. group selector) ---- */
.ao-pick {
display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; width: 100%;
padding: 10px 13px; background: var(--ao-panel); border: 1px solid var(--ao-border); cursor: pointer;
transition: border-color .12s ease, background .12s ease;
}
.ao-pick:hover { border-color: var(--ao-ink); }
.ao-pick.is-on { border-color: var(--ao-green); background: rgba(87,240,138,.06); box-shadow: inset 2px 0 0 var(--ao-green); }
.ao-pick .nm { font-family: var(--ao-display); font-weight: 600; font-size: 13px; letter-spacing: 1px; color: var(--ao-fg); }
.ao-pick.is-on .nm { color: var(--ao-green); }
.ao-pick .meta { font-family: var(--ao-mono); font-size: 10px; letter-spacing: 1px; color: var(--ao-faint); }
/* ---- permission chip (checkbox styled as a toggle chip) ---- */
.ao-perm {
display: inline-flex; align-items: center; padding: 6px 11px; border: 1px solid var(--ao-border);
font-family: var(--ao-mono); font-size: 11px; letter-spacing: 1px; color: var(--ao-dim);
cursor: pointer; user-select: none; transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.ao-perm input { position: absolute; opacity: 0; width: 0; height: 0; }
.ao-perm:hover { border-color: var(--ao-ink); color: var(--ao-ink); }
.ao-perm:has(input:checked) { border-color: var(--ao-green); color: var(--ao-green); background: rgba(87,240,138,.1); }
.ao-perm.wild { letter-spacing: 3px; }
/* ---- pager + extra pill ---- */
.ao-pager { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-family: var(--ao-mono); font-size: 11px; }
.ao-tgl:disabled { opacity: .4; cursor: default; }
.ao-pill.red { color: var(--ao-danger-ink); border-color: #5a2420; }
/* ---- infra status ---- */
.ao-card .v.red { color: var(--ao-danger-ink); }
.ao-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.ao-dot.ok { background: var(--ao-green); box-shadow: 0 0 6px var(--ao-green); }
.ao-dot.warn { background: var(--ao-amber); box-shadow: 0 0 6px var(--ao-amber); }
.ao-dot.down { background: var(--ao-danger-ink); box-shadow: 0 0 6px var(--ao-danger); }
/* ---- tabs ---- */
/* Tabs + content are ONE box. The tab row sits inside the top; the active tab is
marked by a green underline (no box border); the content fills the same box. */
.ao-tabwrap { border: 1px solid var(--ao-border); background: var(--ao-panel); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
:root[data-theme="light"] .ao-tabwrap { box-shadow: 0 1px 3px rgba(16,40,30,.07), 0 4px 14px -8px rgba(16,40,30,.12); }
/* overflow-x:auto would auto-promote overflow-y to auto (the tab buttons' -1px
margin overflows by a hair → a stray vertical scrollbar); pin it to hidden. */
.ao-tabs { display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; border-bottom: 1px solid var(--ao-border-soft); padding: 0 6px; }
.ao-tab { flex: none; white-space: nowrap; }
.ao-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--ao-dim); font-family: var(--ao-mono); font-size: 11px; letter-spacing: 1px; padding: 11px 13px; cursor: pointer; margin-bottom: -1px; }
.ao-tab:hover { color: var(--ao-ink); }
.ao-tab.is-active { color: var(--ao-green); border-bottom-color: var(--ao-green); }
.ao-tabpanel { padding: 18px 16px 16px; }
/* ---- settings rows + toggle switch ---- */
.ao-set-row { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ao-border-soft); }
.ao-set-row:last-child { border-bottom: none; }
.ao-set-hint { font-family: var(--ao-mono); font-size: 10px; letter-spacing: 1px; color: var(--ao-faint); margin-top: 3px; }
.ao-set-control { min-width: 0; }
.ao-switch { position: relative; display: inline-block; width: 42px; height: 22px; cursor: pointer; }
.ao-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ao-switch .ao-track { position: absolute; inset: 0; background: var(--ao-panel2); border: 1px solid var(--ao-border); transition: background .15s ease, border-color .15s ease; }
.ao-switch .ao-track::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: var(--ao-dim); transition: left .15s ease, background .15s ease; }
.ao-switch input:checked + .ao-track { border-color: var(--ao-green); background: rgba(87,240,138,.12); }
.ao-switch input:checked + .ao-track::before { left: 23px; background: var(--ao-green); }
@media (max-width: 620px) { .ao-set-row { grid-template-columns: 1fr; gap: 6px; } }
/* ---- avatar + cropper ---- */
[x-cloak] { display: none !important; }
.ao-avatar { width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden; border: 1px solid var(--ao-border); background: var(--ao-panel2); display: flex; align-items: center; justify-content: center; }
.ao-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ao-avatar span { font-family: var(--ao-display); font-weight: 700; font-size: 22px; color: var(--ao-dim); letter-spacing: 1px; }
.ao-avatar.sm { width: 28px; height: 28px; font-family: var(--ao-mono); font-size: 10px; color: var(--ao-dim); }
.ao-avatar.lg { width: 160px; height: 160px; border-radius: 6px; }
.ao-avatar.lg span { font-size: 44px; }
/* Framed avatar: bordered box with a small inner padding, lifted above the
global scanline overlay (body::after, z-index 999) so the image reads clean. */
.ao-avatar-frame { display: inline-block; padding: 6px; border: 1px solid var(--ao-border); background: var(--ao-panel2); position: relative; z-index: 1000; }
/* The frame supplies the only border — drop the avatar's own to avoid doubling. */
.ao-avatar-frame .ao-avatar { border: 0; }
.ao-file { font-family: var(--ao-mono); font-size: 11px; color: var(--ao-dim); max-width: 230px; }
.ao-file::file-selector-button { font-family: var(--ao-mono); font-size: 11px; letter-spacing: 1px; background: transparent; border: 1px solid var(--ao-border); color: var(--ao-ink); padding: 7px 12px; margin-right: 10px; cursor: pointer; }
.ao-file::file-selector-button:hover { border-color: var(--ao-ink); }
.ao-help { font-family: var(--ao-mono); font-size: 10px; letter-spacing: 1px; color: var(--ao-faint); margin-top: 6px; }
.ao-crop-overlay { position: fixed; inset: 0; z-index: 1001; background: rgba(0,0,0,.78); display: flex; align-items: center; justify-content: center; padding: 24px; }
.ao-crop-box { background: var(--ao-panel); border: 1px solid var(--ao-border); padding: 16px; width: min(440px, 92vw); }
.ao-crop-stage { max-height: 60vh; }
.ao-crop-stage img { display: block; max-width: 100%; }
/* ---- field validation + phone + password strength ---- */
.ao-input.bad { border-color: var(--ao-danger); }
.ao-pw { display: flex; gap: 4px; margin-top: 6px; }
.ao-pw span { height: 3px; flex: 1; background: var(--ao-border); transition: background .15s ease; }
.ao-pw span.on { background: var(--ao-amber); }
.ao-pw span.strong { background: var(--ao-green); }
/* ---- table ---- */
.ao-table { width: 100%; border-collapse: collapse; border: 1px solid var(--ao-border); background: var(--ao-panel); }
.ao-table th { text-align: left; font-family: var(--ao-mono); font-size: 10px; letter-spacing: 1px; color: var(--ao-dim); padding: 10px 12px; border-bottom: 1px solid var(--ao-border); }
.ao-table td { padding: 10px 12px; border-bottom: 1px solid var(--ao-border-soft); font-size: 13px; }
.ao-table tr:last-child td { border-bottom: none; }
.ao-pill { font-family: var(--ao-mono); font-size: 10px; letter-spacing: 1px; padding: 2px 8px; border: 1px solid var(--ao-border); color: var(--ao-dim); }
.ao-pill.green { color: var(--ao-green); border-color: var(--ao-faint); }
.ao-pill.amber { color: var(--ao-amber); border-color: #5a4a1a; }
/* ---- foundation: interaction + headings ---- */
h1, h2, h3 { font-family: var(--ao-display); font-weight: 700; letter-spacing: .5px; }
a:hover { color: var(--ao-green); }
.ao-btn { transition: filter .12s ease; }
/* Keep the button's own text colour on hover: the global `a:hover { color: green }` rule (above)
would otherwise tint an green-on-green and wipe the label. */
.ao-btn:hover { filter: brightness(1.08); color: #03120a; }
.ao-btn:active { filter: brightness(.92); }
.ao-btn-ghost { transition: background .12s ease, color .12s ease; }
.ao-btn-ghost:hover { background: rgba(198,58,46,.12); color: var(--ao-danger-ink); }
.ao-nav a { transition: color .12s ease, border-color .12s ease, background .12s ease; }
*:focus-visible { outline: 2px solid var(--ao-green); outline-offset: 1px; }
.ao-table tr:hover td { background: rgba(87,240,138,.03); }
/* ---- action buttons: symmetric row (equal height, single source of truth) ---- */
/* All row actions share `.ao-act` so heights/padding never drift (e.g. a filled
* primary next to a ghost). Variants only change colour, never box metrics. */
.ao-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ao-act {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: 34px; padding: 0 15px; box-sizing: border-box; white-space: nowrap;
font-family: var(--ao-mono); font-size: 11px; font-weight: 700; letter-spacing: 2px;
border: 1px solid transparent; background: transparent; color: var(--ao-ink);
cursor: pointer; transition: filter .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.ao-act.is-primary { background: var(--ao-green); color: #03120a; border-color: var(--ao-green); }
.ao-act.is-primary:hover { filter: brightness(1.08); }
.ao-act.is-ghost { border-color: var(--ao-border); color: var(--ao-dim); }
.ao-act.is-ghost:hover { border-color: var(--ao-ink); color: var(--ao-ink); }
.ao-act.is-danger { border-color: var(--ao-danger); color: var(--ao-danger-ink); }
.ao-act.is-danger:hover { background: rgba(198,58,46,.12); }
.ao-act.is-icon { padding: 0; width: 34px; }
.ao-act:disabled { opacity: .4; cursor: default; filter: none; }
/* ---- modal (reusable; no native dialog — CLAUDE.md #6) ---- */
.ao-modal-backdrop {
position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
padding: 24px; background: rgba(2,8,5,.66); backdrop-filter: blur(2px);
}
.ao-modal {
width: 100%; max-width: 440px; background: var(--ao-panel2); border: 1px solid var(--ao-border);
box-shadow: 0 18px 50px -12px rgba(0,0,0,.6);
}
.ao-modal-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--ao-border-soft);
}
.ao-modal-title { font-family: var(--ao-display); font-weight: 700; font-size: 14px; letter-spacing: 2px; color: var(--ao-fg); }
.ao-modal-tag { font-family: var(--ao-mono); font-size: 10px; letter-spacing: 1px; color: var(--ao-dim); }
.ao-modal-body { padding: 18px; }
.ao-modal-q { font-family: var(--ao-mono); font-size: 13px; color: var(--ao-ink); }
.ao-modal-q strong { color: var(--ao-fg); font-weight: 700; }
.ao-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; }
/* ---- Guided tour (Driver.js, vendored) — CRT skin over library defaults ----
The vendored driver.css ships a light popover; this re-themes the `.ao-tour`
variant to the tactical palette. Loaded after driver.css, so these win.
Engine: public/js/tours.js. Doc: .ai/game/tours.md. */
.driver-popover.ao-tour {
background: var(--ao-panel);
color: var(--ao-fg);
border: 1px solid var(--ao-green);
border-radius: 0;
box-shadow: 0 0 0 1px var(--ao-bg), 0 14px 40px -10px rgba(0,0,0,.7);
font-family: var(--ao-mono);
}
.driver-popover.ao-tour .driver-popover-title {
font-family: var(--ao-display); font-weight: 700; letter-spacing: 2px;
font-size: 14px; color: var(--ao-green);
}
.driver-popover.ao-tour .driver-popover-description {
color: var(--ao-fg); font-family: var(--ao-mono); font-size: 12px; line-height: 1.55;
}
.driver-popover.ao-tour .driver-popover-progress-text {
color: var(--ao-dim); font-family: var(--ao-mono); font-size: 10px; letter-spacing: 1px;
}
.driver-popover.ao-tour .driver-popover-close-btn { color: var(--ao-dim); }
.driver-popover.ao-tour .driver-popover-close-btn:hover,
.driver-popover.ao-tour .driver-popover-close-btn:focus { color: var(--ao-ink); }
.driver-popover.ao-tour .driver-popover-footer button {
background: transparent; border: 1px solid var(--ao-border); color: var(--ao-dim);
border-radius: 0; font-family: var(--ao-mono); font-size: 11px; letter-spacing: 1px;
text-shadow: none; padding: 5px 10px;
}
.driver-popover.ao-tour .driver-popover-footer button:hover,
.driver-popover.ao-tour .driver-popover-footer button:focus {
background: transparent; color: var(--ao-ink); border-color: var(--ao-ink);
}
/* Arrow tint: only override the single visible side per direction (longhand vs
longhand), so the other three stay transparent and the triangle keeps its
shape. A border-color shorthand here would paint a solid diamond. */
.driver-popover.ao-tour .driver-popover-arrow-side-left { border-left-color: var(--ao-green); }
.driver-popover.ao-tour .driver-popover-arrow-side-right { border-right-color: var(--ao-green); }
.driver-popover.ao-tour .driver-popover-arrow-side-top { border-top-color: var(--ao-green); }
.driver-popover.ao-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--ao-green); }
/* ──────────────────────────────────────────────────────────────────────────
Team directory cards (portal /portal/teams) — "dossier" presentation cards.
The logo fills the card as a scrimmed background; theme is PER TEAM (captain's
pick) and renders independently of the viewer's global portal theme.
[data-card-theme] is a self-contained token ISLAND (--c-* + a default --team).
It sits on the card itself (directory grid + hero) OR on a wrapper (the captain's
live preview), so the same component works in either place. An inline
`style="--team:#hex"` overrides the island default. See components/team-card.blade.php
+ .ai/game/teams.md.
────────────────────────────────────────────────────────────────────────── */
[data-card-theme="dark"] {
--team: #57f08a;
--c-bg: #0b140d; --c-panel: #101c13; --c-fg: #ecf6ef; --c-dim: #9db6a4;
--c-line: rgba(190, 225, 200, .16); --c-amber: #e0b25a; --c-pill-bg: rgba(6, 12, 8, .5);
--c-logo-op: .95;
/* Horizontal fade: panel solid on the left (text legible), dissolving right so the
crest emblem reads crisp — not a flat muddy overlay. Plus a bottom fade for the bar. */
--c-scrim:
linear-gradient(100deg, #0b140d 0%, #0b140def 30%, #0b140d6b 60%, #0b140d12 84%, transparent 100%),
linear-gradient(0deg, #0b140d 4%, transparent 46%);
--c-shadow: 0 10px 28px rgba(0, 0, 0, .38);
}
[data-card-theme="light"] {
--team: #1f9d52;
--c-bg: #f3f6f2; --c-panel: #ffffff; --c-fg: #15241b; --c-dim: #5b6f63;
--c-line: rgba(20, 40, 28, .16); --c-amber: #946712; --c-pill-bg: rgba(255, 255, 255, .72);
--c-logo-op: .95;
--c-scrim:
linear-gradient(100deg, #f3f6f2 0%, #f3f6f2ef 30%, #f3f6f26b 60%, #f3f6f212 84%, transparent 100%),
linear-gradient(0deg, #f3f6f2 4%, transparent 46%);
--c-shadow: 0 10px 24px rgba(20, 40, 28, .14);
}
.ao-tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(344px, 1fr)); gap: 18px; }
.ao-tm-card {
position: relative; isolation: isolate; overflow: hidden;
display: flex; min-height: 308px;
background: var(--c-bg); border: 1px solid var(--c-line); border-top: 3px solid var(--team);
box-shadow: var(--c-shadow); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ao-tm-card:hover { transform: translateY(-2px); border-color: var(--team); }
/* Crest emblem: the whole logo, sized to the card, anchored right and dissolving into
the panel via --c-scrim. Not cover-cropped — the emblem stays recognisable. */
.ao-tm-bg {
position: absolute; inset: 0; z-index: 0;
background-image: var(--logo, none); background-repeat: no-repeat;
background-size: auto 74%; background-position: right -6px center;
opacity: var(--c-logo-op);
}
/* No crest image → tactical hatch + accent glow + giant faint initials, so the card
still reads as designed rather than empty. */
.ao-tm-card.no-logo .ao-tm-bg {
opacity: 1; background-size: auto, auto; background-position: center;
background-image:
radial-gradient(130% 90% at 92% -14%, color-mix(in srgb, var(--team) 28%, transparent), transparent 60%),
repeating-linear-gradient(135deg, var(--c-line) 0 1px, transparent 1px 16px);
}
.ao-tm-watermark {
position: absolute; right: -10px; bottom: -46px;
font-family: var(--ao-display); font-weight: 700; font-size: 172px; line-height: 1;
letter-spacing: -6px; color: var(--team); opacity: .14; user-select: none;
}
.ao-tm-scrim { position: absolute; inset: 0; z-index: 1; background: var(--c-scrim); }
.ao-tm-card-in { position: relative; z-index: 2; display: flex; flex-direction: column; width: 100%; padding: 18px; }
.ao-tm-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; }
.ao-tm-card-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* "Scope" frame: a crisp team-colour border with an offset outline ring. */
.ao-tm-crest {
flex: 0 0 auto; width: 60px; height: 60px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--team); outline: 1px solid color-mix(in srgb, var(--team) 38%, transparent); outline-offset: 3px;
background: var(--c-panel); box-shadow: 0 3px 14px rgba(0, 0, 0, .34);
}
.ao-tm-crest img { width: 100%; height: 100%; object-fit: cover; }
.ao-tm-crest span { font-family: var(--ao-display); font-weight: 700; font-size: 22px; color: var(--team); }
.ao-tm-id { min-width: 0; }
.ao-tm-card-name {
margin: 0; font-family: var(--ao-display); font-weight: 700; font-size: 22px; line-height: 1.12; color: var(--c-fg);
letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-card-theme="dark"] .ao-tm-card-name { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.ao-tm-card-tag { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.ao-tm-card-meta { font-family: var(--ao-mono); font-size: 12px; color: var(--c-dim); display: flex; align-items: center; gap: 6px; }
.ao-tm-pin { color: var(--team); font-size: 13px; }
/* Footer = a full-bleed tinted action bar pinned to the card foot. */
.ao-tm-card-foot {
margin: 14px -18px -18px; padding: 14px 18px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: color-mix(in srgb, var(--team) 8%, var(--c-bg)); border-top: 1px solid var(--c-line);
}
.ao-tm-card-nums { font-family: var(--ao-mono); font-size: 12px; color: var(--c-dim); display: flex; align-items: center; }
.ao-tm-card-nums b { color: var(--c-fg); font-weight: 700; }
.ao-tm-recruit { font-family: var(--ao-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.ao-tm-recruit.is-open { color: var(--c-amber); }
.ao-tm-recruit.is-closed { color: var(--c-dim); opacity: .7; }
.ao-tm-card-act { flex: 0 0 auto; }
/* Children re-themed to the card's token island (works for the grid card's own
[data-card-theme] and for the hero/preview ancestor). */
[data-card-theme] .ao-g-sep { color: var(--c-dim); opacity: .5; margin: 0 5px; }
[data-card-theme] .is-amber { color: var(--c-amber); }
[data-card-theme] .is-dim { color: var(--c-dim); opacity: .65; }
[data-card-theme] .ao-tm-status { font-family: var(--ao-mono); font-size: 11px; color: var(--c-amber); display: inline-flex; align-items: center; gap: 4px; }
[data-card-theme] .ao-pill {
font-family: var(--ao-mono); font-size: 10px; letter-spacing: 1px; padding: 2px 8px;
border: 1px solid var(--c-line); color: var(--c-dim); background: var(--c-pill-bg);
}
[data-card-theme] .ao-pill.amber { color: var(--c-amber); border-color: var(--c-amber); }
[data-card-theme] .ao-act.is-primary { background: var(--team); color: #06120b; border-color: var(--team); }
[data-card-theme] .ao-act.is-ghost { border-color: var(--c-line); color: var(--c-fg); }
.ao-act.is-sm { padding: 4px 10px; font-size: 11px; }
/* ── Featured hero: your team / pending request / create CTA ─────────────── */
.ao-tm-hero {
position: relative; isolation: isolate; overflow: hidden;
display: flex; align-items: center; gap: 18px; padding: 22px 24px; margin-bottom: 24px; min-height: 116px;
background: var(--c-bg, var(--ao-panel2)); border: 1px solid var(--c-line, var(--ao-border)); border-top: 3px solid var(--team, var(--ao-green));
}
.ao-tm-hero.is-pending { border-color: var(--ao-amber, #caa23a); border-top-color: var(--ao-amber, #caa23a); }
.ao-tm-hero.is-cta { border-style: dashed; border-color: var(--ao-border); border-top-width: 1px; }
.ao-tm-hero-in { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; width: 100%; }
.ao-tm-hero-badge {
flex: 0 0 auto; width: 72px; height: 72px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--team, var(--ao-border)); background: var(--c-panel, var(--ao-panel)); box-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}
.ao-tm-hero-badge img { width: 100%; height: 100%; object-fit: cover; }
.ao-tm-hero-badge span { font-family: var(--ao-display); font-weight: 700; font-size: 24px; color: var(--team, var(--ao-green)); }
.ao-tm-hero-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ao-tm-hero-tag { font-family: var(--ao-mono); font-size: 10px; letter-spacing: .12em; color: var(--c-dim, var(--ao-dim)); text-transform: uppercase; }
.ao-tm-hero-name { font-family: var(--ao-display); font-weight: 700; font-size: 22px; color: var(--c-fg, var(--ao-fg)); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-card-theme="dark"].ao-tm-hero .ao-tm-hero-name { text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.ao-tm-hero-meta { font-family: var(--ao-mono); font-size: 12px; color: var(--c-dim, var(--ao-dim)); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ao-tm-hero-actions { flex: 0 0 auto; }
/* ── Captain branding editor (live preview + controls) ───────────────────── */
.ao-tm-brand { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.ao-tm-brand-controls { flex: 0 0 248px; max-width: 100%; }
.ao-tm-brand-preview { flex: 1 1 300px; min-width: 280px; }
.ao-tm-brand-preview .ao-tm-grid { grid-template-columns: minmax(0, 360px); }
/* Compact the shared avatar-field for this editor: smaller crest + the section
label demoted to a plain field label (no heavy placard). */
.ao-tm-brand-controls .ao-avatar.lg { width: 116px; height: 116px; }
.ao-tm-brand-controls .ao-avatar.lg span { font-size: 32px; }
.ao-tm-brand-controls .ao-section {
background: none; border: 0; padding: 0; margin: 0 0 8px;
font-size: 10px; font-weight: 400; color: var(--ao-dim);
}
.ao-tm-brand-controls .ao-field { margin-top: 18px; margin-bottom: 0; }
/* Tidy the logo control: frame on its own line so "CAMBIAR" sits BELOW it (not floating
to its right), and the change button spans the crest width. */
.ao-tm-brand-controls .ao-avatar-frame { display: block; width: max-content; margin-bottom: 8px; }
.ao-tm-brand-controls .ao-avatar-frame + .ao-tgl { margin-top: 0; }
.ao-tm-brand-controls .ao-color-row input[type="color"] { flex: 0 0 auto; }
.ao-tm-brand-controls .ao-seg { width: 100%; }
.ao-tm-brand-controls .ao-seg label { flex: 1; text-align: center; }
.ao-tm-brand-controls .ao-btn { width: 100%; }
.ao-seg { display: inline-flex; border: 1px solid var(--ao-border); }
.ao-seg label { position: relative; font-family: var(--ao-mono); font-size: 11px; letter-spacing: 1px; color: var(--ao-dim); padding: 8px 16px; cursor: pointer; }
.ao-seg label + label { border-left: 1px solid var(--ao-border); }
.ao-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ao-seg label:has(input:checked) { background: var(--ao-green); color: #03120a; }
/* Manage-page team header (above the tabs) */
.ao-tm-rhead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ao-tm-rhead-badge { flex: 0 0 auto; width: 52px; height: 52px; overflow: hidden; border: 1px solid var(--ao-border); background: var(--ao-panel2); display: flex; align-items: center; justify-content: center; }
.ao-tm-rhead-badge img { width: 100%; height: 100%; object-fit: cover; }
.ao-tm-tabs { margin-bottom: 20px; }
.ao-tm-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-bottom: 6px; }
@media (max-width: 560px) { .ao-tm-contact-grid { grid-template-columns: 1fr; } }
.ao-color-row { display: flex; align-items: center; gap: 12px; }
.ao-color-row input[type="color"] { width: 56px; height: 40px; padding: 3px; background: var(--ao-panel); border: 1px solid var(--ao-border); cursor: pointer; }
/* =============================================================================
* RESPONSIVE SHELL — unified sidebar + off-canvas drawer (mobile)
* The sidebar (.ao-side) is shared chrome across public/portal/admin. On desktop
* it's a fixed-width column with a foot pinned to the bottom; below 860px it
* becomes an off-canvas drawer toggled by the topbar hamburger (.ao-burger),
* driven by `body.ao-nav-open` + the scrim. JS: public/js/theme.js. The 860px
* breakpoint is mirrored there (matchMedia) — keep both in sync.
* ============================================================================= */
/* Sidebar as a flex column so the foot sticks to the bottom and the nav scrolls
when long (the organizer portal can have ~10 links). */
.ao-side { display: flex; flex-direction: column; }
.ao-side .ao-nav { flex: 1 1 auto; overflow-y: auto; }
.ao-side-foot {
flex: 0 0 auto; margin-top: auto; padding: 14px 18px 16px;
border-top: 1px solid var(--ao-border-soft);
display: flex; flex-direction: column; gap: 12px;
}
.ao-side-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ao-side-user { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ao-side-who { font-family: var(--ao-mono); font-size: 11px; color: var(--ao-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-side-cta { width: 100%; text-align: center; padding: 11px; font-size: 13px; letter-spacing: 2px; }
/* Topbar left cluster (hamburger + breadcrumb). */
.ao-top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ao-top-left .crumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-burger {
display: none; /* desktop: hidden; shown in the ≤860px query */
align-items: center; justify-content: center; width: 38px; height: 38px; flex: none;
background: transparent; border: 1px solid var(--ao-border); color: var(--ao-ink); cursor: pointer;
}
.ao-burger:hover { border-color: var(--ao-ink); }
.ao-burger svg { display: block; }
/* Drawer scrim (created lazily by JS, appended to ). Inert until open. */
.ao-scrim {
position: fixed; inset: 0; z-index: 55; background: rgba(2, 8, 5, .6);
opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
/* Horizontal-scroll wrapper for tables: a wide table scrolls instead of breaking
the layout on narrow screens. Wrap a in it. */
.ao-tablewrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ao-tablewrap > .ao-table { min-width: max-content; }
/* Flush padding when a wrapped table sits in a split card (mirrors the direct-child rules). */
.ao-card.is-split > .ao-tablewrap > .ao-table { border: 0; }
.ao-card.is-split > .ao-tablewrap > .ao-table th:first-child,
.ao-card.is-split > .ao-tablewrap > .ao-table td:first-child { padding-left: 16px; }
.ao-card.is-split > .ao-tablewrap > .ao-table th:last-child,
.ao-card.is-split > .ao-tablewrap > .ao-table td:last-child { padding-right: 16px; }
@media (max-width: 860px) {
.ao-burger { display: inline-flex; }
.ao-side {
position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
width: min(82vw, 290px); z-index: 60;
transform: translateX(-100%); transition: transform .22s ease;
border-right: 1px solid var(--ao-border);
}
body.ao-nav-open { overflow: hidden; }
body.ao-nav-open .ao-side { transform: translateX(0); box-shadow: 0 8px 40px rgba(0, 0, 0, .6); }
body.ao-nav-open .ao-scrim { opacity: 1; pointer-events: auto; }
.ao-content { padding: 16px; }
.ao-top { padding: 0 14px; }
.ao-top .who { gap: 8px; }
}
@media (max-width: 560px) {
/* Plain username spans in the topbar (admin) — drop to save width; icons stay. */
.ao-top .who > span { display: none; }
.ao-content { padding: 13px; }
}
/* ---- star ratings (design system primitive) ---- */
/* Read-only display: fractional fill via an overlay clipped to value/5. Size via font-size on .ao-stars-d. */
.ao-stars-d { position: relative; display: inline-block; line-height: 1; white-space: nowrap; font-family: var(--ao-display); }
.ao-stars-d-bg { color: var(--ao-border); letter-spacing: 1px; }
.ao-stars-d-fg { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--ao-amber); letter-spacing: 1px; }
/* Input: reverse-row radios so hover/checked fills the star and everything to its left (lower values). */
.ao-stars-in { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.ao-stars-in input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ao-stars-in label { cursor: pointer; color: var(--ao-border); font-size: 22px; line-height: 1; padding: 0 2px; transition: color .1s ease; }
.ao-stars-in label:hover, .ao-stars-in label:hover ~ label,
.ao-stars-in input:checked ~ label { color: var(--ao-amber); }
.ao-stars-in input:focus-visible + label { outline: 1px solid var(--ao-green); outline-offset: 2px; }
/* Client-error viewer — expandable detail panel (context/device/stack) + level badge. */
.ao-lvl { display: inline-block; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--ao-border-soft); color: var(--ao-dim); }
.ao-lvl--error { color: var(--ao-danger-ink); border-color: var(--ao-danger); }
.ao-lvl--warn { color: var(--ao-amber); border-color: var(--ao-amber); }
.ao-err-detail { background: var(--ao-panel2); border-top: 1px solid var(--ao-border-soft); padding: 12px 14px; }
.ao-err-block { margin-bottom: 12px; }
.ao-err-block:last-child { margin-bottom: 0; }
.ao-err-lbl { font-family: var(--ao-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--ao-dim); margin-bottom: 5px; }
.ao-err-pre { font-family: var(--ao-mono); font-size: 11px; line-height: 1.5; color: var(--ao-fg); background: var(--ao-bg); border: 1px solid var(--ao-border-soft); border-radius: 4px; padding: 10px; margin: 0; max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word; }