/* Frontero · sistema visual «minimalismo funcional en negro mate y amarillo» (brief de diseño UI/UX del 27 oct 2026).
   Va al final de todo: define los tokens --fx-* del brief y reasigna las variables antiguas para que TODA la interfaz tome la paleta nueva.
   Reglas: amarillo solo para lo primario, lo activo, el foco, el progreso y las estrellas · color = estado, nunca adorno · tres niveles de elevación · múltiplos de 4 px · sin degradados ni brillos. */

:root, :root[data-theme="dark"] {
  --fx-bg: #0F1012; --fx-surface-1: #17191C; --fx-surface-2: #1F2226; --fx-surface-3: #292D32; --fx-border: #2A2E34; --fx-border-strong: #3A3F46;
  --fx-text-1: #F2F0EA; --fx-text-2: #A9ADB4; --fx-text-3: #7A7F87; --fx-ink: #F2F0EA;
  --fx-accent: #F2B705; --fx-accent-hover: #F5C537; --fx-accent-pressed: #D9A304; --fx-accent-subtle: rgba(242, 183, 5, .12); --fx-accent-text: #F2B705; --fx-on-accent: #111214;
  --fx-success: #3DBE8B; --fx-warning: #F28C38; --fx-error: #F2665C; --fx-info: #6FA8DC;
  --fx-bevel: inset 0 1px 0 rgba(255, 255, 255, .04); --fx-shadow-1: 0 4px 12px rgba(0, 0, 0, .35); --fx-shadow-2: 0 16px 40px rgba(0, 0, 0, .45); --fx-overlay: rgba(0, 0, 0, .6);
}
:root[data-theme="light"] {
  --fx-bg: #F5F4F0; --fx-surface-1: #FFFFFF; --fx-surface-2: #EEEDE8; --fx-surface-3: #E4E2DC; --fx-border: #E2E0D9; --fx-border-strong: #C9C6BD;
  --fx-text-1: #141518; --fx-text-2: #555A61; --fx-text-3: #6B7078; --fx-ink: #141518;
  --fx-accent: #F2B705; --fx-accent-hover: #F5C537; --fx-accent-pressed: #D9A304; --fx-accent-subtle: rgba(242, 183, 5, .16); --fx-accent-text: #8A5D00; --fx-on-accent: #111214;
  --fx-success: #1E7F57; --fx-warning: #B4530F; --fx-error: #C2362C; --fx-info: #2F6DA8;
  --fx-bevel: none; --fx-shadow-1: 0 4px 12px rgba(20, 21, 24, .08); --fx-shadow-2: 0 16px 40px rgba(20, 21, 24, .14); --fx-overlay: rgba(20, 21, 24, .4);
}
:root {
  --fx-font-display: "Montserrat", system-ui, sans-serif; --fx-font-ui: "Roboto", system-ui, sans-serif;
  --fx-radius-sm: 4px; --fx-radius-md: 8px; --fx-radius-lg: 12px; --fx-radius-xl: 16px;
  --fx-focus-ring: 0 0 0 2px var(--fx-bg), 0 0 0 4px var(--fx-accent);
  --fx-ease: cubic-bezier(.2, 0, 0, 1); --fx-dur-fast: 120ms; --fx-dur-base: 200ms; --fx-dur-slow: 240ms;
}
@media (prefers-reduced-motion: reduce) { :root { --fx-dur-fast: 0ms; --fx-dur-base: 0ms; --fx-dur-slow: 0ms; } * { transition-duration: 0ms !important; animation-duration: 0ms !important; } }

/* ---- las variables antiguas apuntan a los tokens nuevos ---- */
[data-theme] {
  --font: var(--fx-font-ui); --mono: var(--fx-font-ui); --r: 8px; --r-in: 6px; --ease: var(--fx-ease);
  --bg: var(--fx-bg); --bg2: var(--fx-bg); --lift: transparent; --lift2: transparent; --face: var(--fx-surface-1); --face-flat: var(--fx-surface-1); --sunk: var(--fx-surface-3); --glass: var(--fx-surface-1); --pad: var(--fx-surface-1);
  --outline: var(--fx-border); --under: transparent; --rim: transparent; --lip: transparent; --drop: transparent; --sunk-sh: transparent; --grid: var(--fx-border); --line: var(--fx-border); --hover: var(--fx-surface-2);
  --ink: var(--fx-text-1); --ink-2: var(--fx-text-2); --ink-3: var(--fx-text-3); --gold-ink: var(--fx-accent-text); --on-gold: var(--fx-on-accent); --logo-navy: var(--fx-ink);
  --y1: var(--fx-accent-hover); --y1u: var(--fx-accent-pressed); --y2: var(--fx-accent); --y2u: var(--fx-accent-pressed); --y3: var(--fx-accent); --y3u: var(--fx-accent-pressed); --y4: var(--fx-accent); --y4u: var(--fx-accent-pressed); --y5: var(--fx-accent-pressed); --y5u: var(--fx-accent-pressed); --y6: var(--fx-accent-pressed); --y6u: var(--fx-accent-pressed);
  --btn2: var(--fx-surface-2); --btn2-u: var(--fx-border-strong); --btn2-ink: var(--fx-text-1); --ychart: var(--fx-accent); --brand-navy: var(--fx-surface-3);
  --ok: var(--fx-success); --bad: var(--fx-error); --warn: var(--fx-warning); --info: var(--fx-info); --dot-ok: var(--fx-success); --dot-bad: var(--fx-error); --dot-info: var(--fx-info);
  --ok-bg: color-mix(in srgb, var(--fx-success) 12%, transparent); --warn-bg: color-mix(in srgb, var(--fx-warning) 12%, transparent); --bad-bg: color-mix(in srgb, var(--fx-error) 12%, transparent); --info-bg: color-mix(in srgb, var(--fx-info) 12%, transparent);
  --c-terra: var(--fx-error); --u-terra: var(--fx-error);
  --sunken: none; --shadow: none;
}
body { font-family: var(--fx-font-ui); background: var(--fx-bg); color: var(--fx-text-1); font-feature-settings: normal; line-height: 1.45; }
[data-theme="dark"] body { background-image: var(--grain-bg); background-blend-mode: soft-light; background-attachment: scroll; }
[data-theme="light"] body { background-image: none; }
h1, .page-head h1 { font: 600 28px/36px var(--fx-font-display); letter-spacing: -.01em; color: var(--fx-text-1); }
h2 { font: 600 18px/24px var(--fx-font-ui); } h3 { font: 600 15px/20px var(--fx-font-ui); } h4 { font: 600 14px/20px var(--fx-font-ui); }
.mono, code, kbd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
:focus-visible { outline: none; box-shadow: var(--fx-focus-ring); border-radius: var(--fx-radius-md); }

/* ---- estructura: barra lateral, encabezado, banner demo ---- */
.app { max-width: 1760px; padding: 0 0 0 0; gap: 0; }
.sidebar { top: 0; height: 100vh; border-radius: 0; border: 0; border-right: 1px solid var(--fx-border); background: var(--fx-surface-1); box-shadow: none; padding: 24px 12px 12px; }
.main { gap: 24px; padding: 0 32px 96px; }
.top { top: 0; margin: 0 -32px; padding: 0 32px; height: 64px; border: 0; border-bottom: 1px solid var(--fx-border); border-radius: 0; box-shadow: none; background: var(--fx-surface-1); }
.top .crumb { color: var(--fx-text-3); font-weight: 400; } .top .crumb b { color: var(--fx-text-1); font-weight: 500; }
.demo-banner, .act-banner { margin: 0 -32px; border: 0; border-left: 3px solid var(--fx-accent); border-radius: 0; text-align: left; padding: 6px 32px; min-height: 32px; font-size: 12px; font-weight: 400; background: var(--fx-surface-2); color: var(--fx-text-2); letter-spacing: 0; }
.act-banner .btn { padding: 0 10px; }
@media (max-width: 1100px) { .main { padding: 0 16px 96px; } .top, .demo-banner, .act-banner { margin: 0 -16px; padding-left: 16px; padding-right: 16px; } }
[data-theme] .brand .plate { background: transparent; box-shadow: none; border: 0; border-radius: var(--fx-radius-md); }
[data-theme="dark"] .brand .plate { background: #F2F0EA; }  /* el logotipo es azul oscuro: sobre negro necesita una placa lisa hasta contar con la versión en blanco */

/* ---- menú lateral: un solo tratamiento; el activo lleva una barra de acento ---- */
.nav-item { border: 0; border-radius: var(--fx-radius-md); min-height: 40px; padding: 8px 12px; color: var(--fx-text-2); font-weight: 400; position: relative; }
.nav-item:hover { background: var(--fx-surface-2); color: var(--fx-text-1); }
.nav-item.on { background: var(--fx-surface-3); box-shadow: none; color: var(--fx-text-1); font-weight: 500; border: 0; }
.nav-item.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--fx-accent); }
.nav-item.on svg, .nav-item svg { color: currentColor; }
.grp-h { color: var(--fx-text-3); font: 600 11px/16px var(--fx-font-ui); letter-spacing: .06em; }
.nav-badge { background: var(--fx-surface-3); color: var(--fx-text-1); box-shadow: none; }
.me .who b, .me .who .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .me .who { min-width: 0; }
.avatar { background: var(--fx-surface-3); color: var(--fx-text-1); border: 0; border-radius: 50%; }

/* ---- botones: uno primario por zona; el resto, secundario o terciario ---- */
.btn { height: 36px; padding: 0 16px; border-radius: var(--fx-radius-md); border: 1px solid var(--fx-border-strong); background: var(--fx-surface-2); color: var(--fx-text-1); box-shadow: var(--fx-bevel); font: 500 14px/20px var(--fx-font-ui); transition: background var(--fx-dur-fast) var(--fx-ease), border-color var(--fx-dur-fast) var(--fx-ease); }
.btn:hover { background: var(--fx-surface-3); filter: none; color: var(--fx-text-1); } .btn:active { transform: none; background: var(--fx-surface-3); box-shadow: none; filter: none; }
.btn.primary { background: var(--fx-accent); border-color: var(--fx-accent); color: var(--fx-on-accent); box-shadow: var(--fx-bevel); } .btn.primary:hover { background: var(--fx-accent-hover); border-color: var(--fx-accent-hover); color: var(--fx-on-accent); } .btn.primary:active { background: var(--fx-accent-pressed); border-color: var(--fx-accent-pressed); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fx-text-2); box-shadow: none; } .btn.ghost:hover { background: var(--fx-surface-2); color: var(--fx-text-1); }
.btn.danger { background: var(--fx-surface-2); border-color: var(--fx-error); color: var(--fx-error); box-shadow: none; } .btn.danger:hover { background: color-mix(in srgb, var(--fx-error) 12%, transparent); color: var(--fx-error); }
.btn.dark { background: var(--fx-surface-3); border-color: var(--fx-border-strong); color: var(--fx-text-1); box-shadow: none; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; } .btn.lg { height: 44px; padding: 0 20px; font-size: 14px; }
.btn:disabled { opacity: .4; filter: none; box-shadow: none; }
.icon-btn { width: 36px; height: 36px; border-radius: var(--fx-radius-md); border: 1px solid transparent; background: transparent; color: var(--fx-text-2); box-shadow: none; } .icon-btn:hover { background: var(--fx-surface-2); color: var(--fx-text-1); filter: none; }
.icon-btn .dot { background: var(--fx-error); color: #fff; border: 0; min-width: 16px; height: 16px; border-radius: 8px; font-size: 11px; }
.token-chip { height: 36px; background: var(--fx-surface-2); border: 1px solid var(--fx-border-strong); color: var(--fx-text-1); box-shadow: none; border-radius: var(--fx-radius-md); font-weight: 500; } .token-chip svg { color: var(--fx-accent); } .token-chip.low { background: color-mix(in srgb, var(--fx-warning) 14%, var(--fx-surface-2)); border-color: var(--fx-warning); box-shadow: none; } .token-chip:hover { filter: none; background: var(--fx-surface-3); color: var(--fx-text-1); }

/* ---- controles segmentados (vista, pestañas, tema, lista/cadena) ---- */
.seg-btn, .viewswitch, .tabs, .vtoggle { background: var(--fx-surface-2); border: 0; box-shadow: none; border-radius: var(--fx-radius-md); padding: 4px; }
.tabs button, .viewswitch button, .vtoggle button { border: 0; border-radius: 6px; color: var(--fx-text-2); font-weight: 500; background: none; }
.tabs button.active, .viewswitch button.on, .vtoggle button.on, .seg-btn button.on { background: var(--fx-surface-3); color: var(--fx-text-1); box-shadow: none; border: 0; }
.tabs button small { background: var(--fx-surface-3); border-radius: 9px; padding: 1px 7px; font-size: 12px; color: var(--fx-text-1); }
.viewswitch span { color: var(--fx-text-3); font: 600 11px/16px var(--fx-font-ui); letter-spacing: .06em; }

/* ---- tarjetas, KPI y tablas ---- */
.card, .kpi, .tk-kpi, .viz-card, .modal { box-shadow: var(--fx-bevel); }
.card { background: var(--fx-surface-1); border: 1px solid var(--fx-border); border-radius: var(--fx-radius-lg); padding: 24px; }
.card .card { border-radius: var(--fx-radius-md); background: var(--fx-surface-2); }
.kpi, .tk-kpi, .stat { background: var(--fx-surface-1); border: 1px solid var(--fx-border); border-radius: var(--fx-radius-lg); padding: 16px 20px; }
.kpi b { font: 600 32px/40px var(--fx-font-ui); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .kpi span, .stat-label { font: 600 11px/16px var(--fx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--fx-text-2); }
.kpi.warn b, .tk-kpi.warn b { color: var(--fx-warning); } .kpi.bad b, .tk-kpi.bad b { color: var(--fx-error); } .tk-kpi.ok b { color: var(--fx-success); } a.kpi:hover, a.tk-kpi:hover, a.card:hover { border-color: var(--fx-border-strong); }
table.t th { font: 600 11px/16px var(--fx-font-ui); letter-spacing: .06em; color: var(--fx-text-2); border-bottom: 1px solid var(--fx-border); padding: 12px; }
table.t td { border-bottom: 1px solid var(--fx-border); padding: 12px; } table.t.hover tbody tr:hover, table.t tbody tr:hover { background: var(--fx-surface-2); }
.progress { height: 6px; background: var(--fx-surface-3); border: 0; box-shadow: none; border-radius: 3px; } .progress > i { background: var(--fx-accent); background-image: none; border-radius: 3px; box-shadow: none; }
.progress.ok i { background: var(--fx-success); } .progress.warn i { background: var(--fx-warning); } .progress.bad i { background: var(--fx-error); }

/* ---- chips de estado: punto + texto; el color solo en el punto ---- */
.badge { height: 24px; padding: 0 10px; border-radius: var(--fx-radius-sm); border: 0; background: var(--fx-surface-2); color: var(--fx-text-1); font: 500 12px/16px var(--fx-font-ui); }
.badge::before { width: 6px; height: 6px; background: var(--fx-text-3); }
.badge.ok::before { background: var(--fx-success); } .badge.warn::before { background: var(--fx-warning); } .badge.bad::before { background: var(--fx-error); } .badge.info::before { background: var(--fx-info); }
.badge.gold, .badge.navy { background: var(--fx-surface-2); color: var(--fx-text-1); border: 0; } .badge.gold::before, .badge.navy::before { background: var(--fx-accent); }
.chip, .ax-chip { background: var(--fx-surface-2); border: 0; color: var(--fx-text-2); border-radius: var(--fx-radius-sm); font-size: 12px; }
.ax-chip.ok { box-shadow: inset 2px 0 0 var(--fx-success); } .ax-chip.warn { background: color-mix(in srgb, var(--fx-warning) 12%, var(--fx-surface-2)); box-shadow: inset 2px 0 0 var(--fx-warning); } .ax-chip.bad { background: color-mix(in srgb, var(--fx-error) 12%, var(--fx-surface-2)); box-shadow: inset 2px 0 0 var(--fx-error); } .ax-chip.info { box-shadow: inset 2px 0 0 var(--fx-info); }
.alert { border: 0; border-left: 3px solid var(--fx-border-strong); background: var(--fx-surface-2); color: var(--fx-text-1); border-radius: var(--fx-radius-md); }
.alert.info { border-left-color: var(--fx-info); } .alert.warn { border-left-color: var(--fx-warning); } .alert.bad { border-left-color: var(--fx-error); } .alert.ok { border-left-color: var(--fx-success); }
.ghost { border-color: var(--fx-border-strong); background: var(--fx-surface-2); border-radius: var(--fx-radius-md); }

/* ---- formularios ---- */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=datetime-local], input[type=date], input[type=search], input[type=url], input[type=tel], select, textarea { background: var(--fx-surface-2); border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-md); box-shadow: none; color: var(--fx-text-1); height: 36px; }
textarea { height: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--fx-accent); box-shadow: 0 0 0 2px var(--fx-accent-subtle); }
.f > span, label.f span { color: var(--fx-text-2); font: 500 12px/16px var(--fx-font-ui); } input::placeholder, textarea::placeholder { color: var(--fx-text-3); }
input[type=checkbox], input[type=radio] { accent-color: var(--fx-accent); } option { color: #141518; background: #fff; }

/* ---- modales, menús y avisos ---- */
.modal-bg { background: var(--fx-overlay); } .modal { background: var(--fx-surface-3); border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-xl); box-shadow: var(--fx-shadow-2); } .modal-foot { background: transparent; border-top: 1px solid var(--fx-border); }
.modal .card, .modal .alert { background: var(--fx-surface-2); }
.menu { background: var(--fx-surface-3); border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-lg); box-shadow: var(--fx-shadow-1); }
#toasts .toast { border-radius: var(--fx-radius-md); box-shadow: var(--fx-shadow-1); background: var(--fx-surface-3); border: 1px solid var(--fx-border-strong); border-left: 3px solid var(--fx-info); }
#toasts .toast.ok { border-left-color: var(--fx-success); } #toasts .toast.bad { border-left-color: var(--fx-error); }

/* ---- Salmon-Connect, Rankea, TERA: sin brillos ni degradados ---- */
.fd-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(260px, 340px); gap: 24px; align-items: start; }
.fd-rail { position: sticky; top: 88px; display: grid; gap: 16px; }
.fd-rail-box { padding: 16px 20px; } .fd-rail-box .card-title { margin-bottom: 8px; }
.fd-rail-row { display: block; padding: 10px 0; border-top: 1px solid var(--fx-border); color: var(--fx-text-1); text-decoration: none; } .fd-rail-row:first-of-type { border-top: 0; }
.fd-rail-row b { display: block; font: 500 14px/20px var(--fx-font-ui); } .fd-rail-row small { color: var(--fx-text-3); } .fd-rail-row:hover b { color: var(--fx-accent-text); }
@media (max-width: 1180px) { .fd-layout { grid-template-columns: minmax(0, 1fr); } .fd-rail { display: none; } }
.fd-post, .fd-job, .sc-hero { border-radius: var(--fx-radius-lg); } .sc-hero { background: var(--fx-surface-1); }
.fd-act.on { color: var(--fx-accent-text); } .fd-act.on svg { fill: var(--fx-accent); }
.dr-av { background: var(--fx-surface-3); color: var(--fx-text-1); }
.co-logo { background: #fff; border-color: var(--fx-border); border-radius: var(--fx-radius-md); } .co-logo.mono { background: var(--fx-surface-3); color: var(--fx-text-1); border-color: var(--fx-border); }
.rate button { color: var(--fx-border-strong); } .rate button.on { color: var(--fx-accent); }
.stars svg path { fill-opacity: 1; }
.tera-panel { border-radius: var(--fx-radius-xl); background: var(--fx-surface-2); border-color: var(--fx-border-strong); box-shadow: var(--fx-shadow-2); }
.tera-head { background: var(--fx-surface-3); color: var(--fx-text-1); border-bottom: 1px solid var(--fx-border); } .tera-head img { border-color: var(--fx-accent); background: var(--fx-surface-1); }
.tera-fab { background: var(--fx-surface-3); border-color: var(--fx-border-strong); box-shadow: var(--fx-shadow-1); }
.tera-m.me { background: var(--fx-accent); color: var(--fx-on-accent); } .tera-m.bot { background: var(--fx-surface-3); }
.tera-tip { background: var(--fx-surface-3); border-color: var(--fx-border-strong); box-shadow: var(--fx-shadow-1); }
.today-row.urgent b { color: var(--fx-warning); }
.auth-hero, .auth-card { box-shadow: none; }
.mod-landing .mod-teaser { background: var(--fx-accent-subtle); border-color: var(--fx-accent); }

/* ---- Trakea: seis cifras caben en una fila en pantalla ancha (sin una huérfana en la segunda) ---- */
.tk-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tk-kpi b { font-size: 28px; line-height: 36px; }

/* ---- Trakea como tablero ---- */
.tk-nav { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; top: 64px; z-index: 5; padding: 8px 0; background: var(--fx-bg); }
.tk-nav a { padding: 6px 14px; border-radius: var(--fx-radius-md); background: var(--fx-surface-2); color: var(--fx-text-1); text-decoration: none; font: 500 13px/20px var(--fx-font-ui); } .tk-nav a:hover { background: var(--fx-surface-3); } .tk-nav a.off { color: var(--fx-text-3); }
.tk-card { scroll-margin-top: 120px; } .tk-charts { margin-top: 20px; }
.tk-foot { margin-top: 8px; }
@media print { .sidebar, .top, .demo-banner, .tk-nav, .tera-fab, .page-head .row, #tera-fab, #tera-panel { display: none !important; } .main { padding: 0 !important; } .card { break-inside: avoid; box-shadow: none; } body { background: #fff; } }

/* ---- Axeso: tablero para arrastrar trabajadores a las faenas ---- */
.ax-cols { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.ax-col { flex: 0 0 260px; background: var(--fx-surface-2); border: 1px dashed var(--fx-border-strong); border-radius: var(--fx-radius-lg); padding: 12px; min-height: 140px; transition: border-color var(--fx-dur-fast) var(--fx-ease), background var(--fx-dur-fast) var(--fx-ease); }
.ax-col.pool { flex-basis: 300px; border-style: solid; } .ax-col.over { border-color: var(--fx-accent); background: var(--fx-accent-subtle); }
.ax-col h4 { margin: 0 0 8px; font: 600 14px/20px var(--fx-font-ui); } .ax-col h4 small { display: block; color: var(--fx-text-3); font-weight: 400; }
.ax-col input[type=search] { width: 100%; margin-bottom: 8px; } .ax-col .btn.sm { width: 100%; margin-bottom: 8px; }
.ax-list { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.ax-wchip { position: relative; display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--fx-radius-md); background: var(--fx-surface-1); border: 1px solid var(--fx-border); border-left: 3px solid var(--fx-border-strong); cursor: grab; user-select: none; }
.ax-wchip.ok { border-left-color: var(--fx-success); } .ax-wchip.warn { border-left-color: var(--fx-warning); } .ax-wchip.bad { border-left-color: var(--fx-error); } .ax-wchip.info { border-left-color: var(--fx-info); }
.ax-wchip .n { font: 500 13px/18px var(--fx-font-ui); padding-right: 22px; } .ax-wchip small { color: var(--fx-text-3); } .ax-wchip .badge { justify-self: start; margin-top: 2px; }
.ax-wchip.sel { outline: 2px solid var(--fx-accent); outline-offset: -1px; background: var(--fx-accent-subtle); } .ax-wchip.drag { opacity: .45; }
.ax-wchip .x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--fx-text-3); cursor: pointer; font-size: 16px; line-height: 1; } .ax-wchip .x:hover { background: var(--fx-surface-3); color: var(--fx-text-1); }
.ax-empty { color: var(--fx-text-3); font-size: 12px; text-align: center; padding: 16px 8px; }

/* ---- Gremios ---- */
.gd-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; } .gd-bar input[type=search] { min-width: 240px; }
.gd-post, .gd-q { margin-bottom: 16px; } .gd-post h3, .gd-q h3 { margin: 8px 0; }
.gd-text { white-space: pre-wrap; color: var(--fx-text-1); margin-bottom: 12px; }
.gd-foot { margin-top: 12px; border-top: 1px solid var(--fx-border); padding-top: 12px; }
.gd-com { padding: 10px 12px; margin-top: 8px; border-radius: var(--fx-radius-md); background: var(--fx-surface-2); } .gd-com.guild { border-left: 3px solid var(--fx-accent); }
.gd-last { margin: 4px 0 8px; } .gd-last b { font: 600 28px/36px var(--fx-font-ui); }
.gd-pts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; } .gd-pts .x { border: 0; background: none; color: var(--fx-text-3); cursor: pointer; } .gd-pts .x:hover { color: var(--fx-error); }
.gd-kpis { margin-bottom: 16px; }

/* Trakea: las tarjetas se acomodan en dos columnas sin dejar huecos (las tablas y barras apiladas ocupan todo el ancho) */
.tk-charts { display: block; columns: 2 420px; column-gap: 16px; }
.tk-charts > .viz-card { display: block; width: 100%; margin: 0 0 16px; break-inside: avoid; }
.tk-charts > .viz-card.wide { column-span: all; }
.tk-grid.fixed { grid-template-columns: repeat(var(--tkc), minmax(0, 1fr)); }
@media (max-width: 900px) { .tk-grid.fixed { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

/* ---- contraste: nada de texto blanco sobre fondos que en el tema claro son claros ---- */
.matrix th.supplier { background: var(--fx-surface-3); color: var(--fx-text-1); font-weight: 500; border-bottom: 1px solid var(--fx-border-strong); }
.matrix th.supplier .btn.ghost { color: var(--fx-text-2); } .matrix th.supplier .btn.ghost:hover { color: var(--fx-text-1); background: var(--fx-surface-2); }
.rankbadge { background: var(--fx-surface-2); border: 1px solid var(--fx-border-strong); color: var(--fx-text-1); } .rankbadge.r1 { background: var(--fx-accent); border-color: var(--fx-accent); color: var(--fx-on-accent); }
.tray { background: var(--fx-surface-3); color: var(--fx-text-1); border-top: 1px solid var(--fx-border-strong); }
.viz-tip { background: #17191C; color: #F2F0EA; border: 1px solid #3A3F46; box-shadow: var(--fx-shadow-1); } .viz-tip b { color: #FFFFFF; } .viz-tip div { color: #C9CDD3; }

/* ---- cifras clave de Trakea: etiqueta, número grande y su imagen (barra de proporción, partes o mini línea) ---- */
.tk-kpi { display: flex; flex-direction: column; gap: 6px; min-height: 124px; padding: 14px 16px; }
.tk-kpi > span:first-child { font: 600 11px/16px var(--fx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--fx-text-2); }
.tk-kpi b { font: 600 30px/36px var(--fx-font-ui); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tk-kpi small { color: var(--fx-text-3); font-size: 12px; line-height: 16px; margin-top: auto; }
.tk-bar, .tk-parts { display: flex; width: 100%; height: 6px; border-radius: 3px; background: var(--fx-surface-3); overflow: hidden; gap: 2px; } .tk-bar i { display: block; height: 100%; border-radius: 3px; } .tk-parts i { display: block; height: 100%; min-width: 3px; }
.tk-spark { display: block; height: 22px; } .tk-spark svg { width: 100%; height: 22px; }
.tk-tabs { margin: 4px 0 8px; display: inline-flex; } .tk-tabs a { padding: 6px 14px; border-radius: 6px; color: var(--fx-text-2); text-decoration: none; font-weight: 500; } .tk-tabs a.active { background: var(--fx-surface-3); color: var(--fx-text-1); }

/* ---- Axeso · repositorio ---- */
.ax-grp { border-top: 1px solid var(--fx-border); padding: 4px 0; } .ax-grp > summary { cursor: pointer; padding: 10px 4px; list-style: none; display: flex; gap: 10px; align-items: center; } .ax-grp > summary::-webkit-details-marker { display: none; }
.ax-grp > summary::before { content: "▸"; color: var(--fx-text-3); } .ax-grp[open] > summary::before { content: "▾"; }
.tone-bad { color: var(--fx-error); font-weight: 500; } .tone-warn { color: var(--fx-warning); font-weight: 500; }

/* ---- categorías: «Otros» con sugerencias, selector del proveedor y lista jerárquica ---- */
.cat-other { padding: 12px 14px; border: 1px dashed var(--fx-border-strong); border-radius: var(--fx-radius-md); background: var(--fx-surface-2); }
.cat-chips { display: grid; gap: 8px; margin-top: 8px; }
.cat-chip { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-md); background: var(--fx-surface-1); cursor: pointer; }
.cat-chip input { grid-row: span 2; margin-top: 3px; } .cat-chip b { font-weight: 500; } .cat-chip small { color: var(--fx-text-3); } .cat-chip.on { border-color: var(--fx-accent); background: var(--fx-accent-subtle); }
.cat-list { max-height: 340px; overflow: auto; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-md); padding: 8px 14px; }
.cat-stage { margin-bottom: 10px; } .cat-stage > b { display: block; font: 600 11px/16px var(--fx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--fx-text-2); margin: 8px 0 4px; }
.check.child { margin-left: 22px; } .cat-ask { padding: 12px 14px; border-radius: var(--fx-radius-md); background: var(--fx-surface-2); }

/* ---- Axeso · clientes y faenas: lista a la izquierda, matriz de empleados × documentos a la derecha ---- */
.axd-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 1000px) { .axd-wrap { grid-template-columns: 1fr; } }
.axd-list { display: grid; gap: 8px; position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow: auto; }
.axd-dest { display: grid; gap: 6px; text-align: left; padding: 12px 14px; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-lg); background: var(--fx-surface-1); color: var(--fx-text-1); cursor: pointer; font: inherit; }
.axd-dest:hover { border-color: var(--fx-border-strong); } .axd-dest.on { border-color: var(--fx-accent); background: var(--fx-accent-subtle); }
.axd-main { display: grid; gap: 16px; min-width: 0; } .axd-head h2 { font: 600 20px/28px var(--fx-font-ui); }
.axd-picked { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px; border-radius: var(--fx-radius-md); background: var(--fx-accent-subtle); border: 1px solid var(--fx-accent); }
.ax-mx { min-width: 760px; } .ax-mx th.mxh { min-width: 118px; max-width: 150px; white-space: normal; line-height: 15px; vertical-align: bottom; }
.ax-mx td.mx { text-align: center; vertical-align: middle; font-weight: 600; min-width: 96px; } .ax-mx td.mx small { display: block; font-weight: 400; font-size: 11px; line-height: 14px; color: var(--fx-text-2); }
.ax-mx td.mx.ok { background: color-mix(in srgb, var(--fx-success) 14%, transparent); color: var(--fx-success); } .ax-mx td.mx.ok.soon { background: color-mix(in srgb, var(--fx-warning) 14%, transparent); }
.ax-mx td.mx.warn { background: color-mix(in srgb, var(--fx-warning) 14%, transparent); color: var(--fx-warning); } .ax-mx td.mx.bad { background: color-mix(in srgb, var(--fx-error) 14%, transparent); color: var(--fx-error); }
.ax-mx td.mx.na { color: var(--fx-text-3); font-weight: 400; } .ax-mx td.mx a { color: inherit; text-decoration: none; font-size: 16px; }
.mx-up { margin-top: 4px; padding: 2px 8px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font: 500 11px/16px var(--fx-font-ui); cursor: pointer; }
.ax-mx tfoot td { border-top: 2px solid var(--fx-border-strong); } .ax-mx tbody tr:hover { background: var(--fx-surface-2); }
.axd-rq { padding: 4px 0; gap: 8px; align-items: center; } .axd-rq select { max-width: 220px; }

/* Trakea: tarjetas de a dos en una grilla (la última de una tanda impar ocupa todo el ancho: sin medios renglones vacíos) */
.tk-charts { display: grid; columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tk-charts > .viz-card { margin: 0; break-inside: auto; } .tk-charts > .viz-card.wide { grid-column: 1 / -1; column-span: none; }
@media (max-width: 900px) { .tk-charts { grid-template-columns: 1fr; } }
.gd-bar input, .gd-bar select { width: auto; min-width: 170px; max-width: 100%; }