/* Tema por defecto de ops (redesign.css) recortado. No se edita a mano: sale de scripts/recorta-tema.py */
/* =============================================================================
   KOMANDESK · REDESIGN
   Capa nueva de diseño. Convive con ops-premium-tokens.css (legacy) y se enlaza
   DESPUÉS. No toca los estilos antiguos: cada pantalla se migra a este sistema
   cuando la rehacemos. Tema = solo variables (claro por defecto, oscuro abajo).

   Estética base: template dashboard de Nuxt (superficies claras, aireado,
   bordes suaves). Color de marca: granate.

   Índice
   -----------------------------------------------------------------------------
   1. Tokens (paleta granate + neutros + roles de superficie/texto)
   2. Tema oscuro (solo redefine roles)
   3. Componentes: auth / login
   ========================================================================== */

/* =============================================================================
   1 · TOKENS
   ========================================================================== */
:root {
  /* --- Granate (color de marca; re-tinta todo lo que consuma --primary) --- */
  --granate-50:  #fdf2f4;
  --granate-100: #fce7eb;
  --granate-200: #f7c9d3;
  --granate-300: #ee9bad;
  --granate-400: #e06584;
  --granate-500: #c73e63;
  --granate-600: #9d2449;
  --granate-700: #7f1d3c;
  --granate-800: #6b1a34;
  --granate-900: #5c1a30;

  /* --- Neutros (escala slate, estilo Nuxt) ------------------------------- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* --- Intención (semánticos) ------------------------------------------- */
  --ok:     #16a34a;
  --ok-soft:   #dcfce7;
  --warn:   #d97706;
  --warn-soft: #fef3c7;
  --bad:    #dc2626;
  --bad-soft:  #fee2e2;

  /* --- Roles de superficie y texto (lo que consumen los componentes) ----- */
  --bg:            var(--slate-50);
  --surface:       #ffffff;
  --surface-2:     var(--slate-100);
  --surface-hover: var(--slate-100);
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --fg:            var(--slate-900);
  --fg-soft:       var(--slate-600);
  --fg-muted:      var(--slate-400);

  /* --- Primario (derivado del granate) ---------------------------------- */
  --primary:       var(--granate-600);
  --primary-hover: var(--granate-700);
  --primary-soft:  var(--granate-50);
  --primary-fg:    #ffffff;
  --ring:          color-mix(in srgb, var(--primary) 40%, transparent);

  /* --- Sidebar (roles propios; claro estilo Nuxt) ----------------------- */
  --nav-bg:         var(--surface);
  --nav-fg:         var(--fg-soft);
  --nav-fg-strong:  var(--fg);
  --nav-muted:      var(--fg-muted);
  --nav-hover-bg:   var(--surface-2);
  --nav-active-bg:  var(--primary-soft);
  --nav-active-fg:  var(--primary);
  --nav-border:     var(--border);
  --nav-icon-bg:    var(--surface-2);
  --nav-icon-fg:    var(--fg-muted);

  /* --- Radios y sombras (suaves, Nuxt) ---------------------------------- */
  --k-r-sm: 6px;
  --k-r-md: 8px;
  --k-r-lg: 12px;
  --k-r-xl: 16px;
  --k-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --k-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.05);
  --k-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* =============================================================================
   3 · AUTH / LOGIN
   ========================================================================== */
/* Nuestros componentes definen display propio (flex). Como el JS oculta/muestra
   con la clase .hidden, hay que garantizar que .hidden gane SOBRE esos componentes.
   Se hace con selectores de mayor especificidad, acotados a nuestras clases, para
   no tocar el .hidden global del resto de la app. */
.k-auth.hidden,
.k-form.hidden { display: none; }
.k-auth {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(120% 120% at 50% -20%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 55%),
    var(--bg);
  font-family: var(--font-ui);
  color: var(--fg);
}
.k-auth-card {
  width: 100%;
  max-width: 25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--k-r-xl);
  box-shadow: var(--k-shadow-lg);
  padding: 2rem 1.75rem 1.75rem;
}
.k-auth-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.k-auth-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--k-r-md);
  background: var(--primary);
  color: var(--primary-fg);
  flex: none;
}
.k-auth-brand-mark svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.k-auth-brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.k-auth-brand-name span {
  color: var(--fg-muted);
  font-weight: 500;
  margin-left: 0.15rem;
}
.k-auth-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 0.3rem;
}
.k-auth-subtitle {
  font-size: 0.875rem;
  color: var(--fg-soft);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}
.k-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.k-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.k-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fg-soft);
}
.k-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--k-r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.k-input::placeholder { color: var(--fg-muted); }
.k-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 2.5rem;
  padding: 0 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  border-radius: var(--k-r-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.k-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}
.k-btn-primary {
  background: var(--primary);
  color: var(--primary-fg);
}
.k-btn-primary:hover { background: var(--primary-hover); }
.k-btn-ghost {
  background: transparent;
  color: var(--fg-soft);
  font-weight: 500;
  height: auto;
  padding: 0.35rem;
}
.k-btn-ghost:hover { color: var(--fg); text-decoration: underline; }
.k-auth-error {
  font-size: 0.85rem;
  color: var(--bad);
  padding: 0.6rem 0.75rem;
  background: var(--bad-soft);
  border-radius: var(--k-r-md);
}
.k-auth-note {
  font-size: 0.8rem;
  color: var(--fg-soft);
  text-align: center;
}
.k-invite-summary {
  padding: 0.75rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--k-r-md);
}
.k-invite-summary-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
}
.k-invite-summary-detail {
  font-size: 0.8rem;
  color: var(--fg-soft);
  margin-top: 0.2rem;
}

/* =============================================================================
   4 · BOTONES — mapea las clases legacy .btn-* al granate bajo el tema nuevo.
   Solo cambia color (la geometría viene de la base .btn-* de ops-premium-tokens).
   Va con !important porque la base también lo usa.
   ========================================================================== */
.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-fg) !important;
}
.btn-primary:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--primary-fg) !important;
}
.btn-outline {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}
.btn-outline:hover {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}

/* =============================================================================
   5 · MARCO / SHELL — topbar, barra de filtros y contenido principal.
   Se hace tematizable (variables) para que claro y oscuro sean coherentes.
   Scopeado al tema nuevo para no tocar los temas legacy.
   ========================================================================== */
body { background: var(--bg); }
#global-topbar,
#filter-bar,
#kb-col-filter:not(.hidden) {
  background: var(--surface);
  border-color: var(--border);
}
.k-main {
  background: var(--surface);
  border-color: var(--border);
}
#app {
  background: var(--surface);
  color: var(--fg);
}

/* =============================================================================
   6 · REMAPEO DE ROLES LEGACY (--c-*) → roles nuxt.
   Toda la capa legacy (status-badge, ops-color-chip, chips, selects, tablas…)
   consume las variables --c-*. Remapeándolas bajo el tema nuevo se re-tinta
   TODO de golpe al slate+granate, sin restyle pieza a pieza. Gana sobre el
   :root legacy por ir después (misma especificidad) y solo aplica en nuxt.
   ========================================================================== */
:root {
  --c-bg:            var(--bg);
  --c-surface:       var(--surface);
  --c-surface-alt:   var(--surface-2);
  --c-surface-soft:  var(--surface-2);
  --c-text:          var(--fg);
  --c-text-muted:    var(--fg-muted);
  --c-border:        var(--border);
  --c-border-strong: var(--border-strong);
  --c-accent:        var(--primary);
  --c-success:       var(--ok);
  --c-warning:       var(--warn);
  --c-danger:        var(--bad);
  --c-emphasis-bg:     var(--slate-900);
  --c-emphasis-text:   #ffffff;
  --c-emphasis-muted:  var(--slate-400);
  --c-emphasis-border: color-mix(in srgb, #ffffff 12%, transparent);
}

/* =============================================================================
   7 · AFINADO DE PILLS/CHIPS al lenguaje Nuxt (menos peso visual)
   ========================================================================== */
/* Chips de filtro/columna: el acento es un borde izquierdo a toda la altura y a
   ras del extremo, pero RECTO. Se consigue cuadrando solo las esquinas izquierdas
   (izquierda recta, derecha redondeada) → el acento no sigue ninguna curva. */
.ops-color-chip {
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--chip-accent, var(--c-text-muted)) !important;
  border-radius: 0 5px 5px 0;
  padding-left: 0.55rem;
}
.ops-color-chip:hover,
.ops-color-chip.active {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  border-left-color: var(--chip-accent, var(--c-text-muted)) !important;
  color: var(--fg) !important;
}

/* Selects e inputs del área de menús: superficie + borde nuxt, radio suave. */
#filter-bar select,
#filter-bar input[type="text"],
#global-topbar select {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--k-r-md);
  color: var(--fg);
}
#filter-bar input[type="text"]:focus,
#filter-bar select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

/* =============================================================================
   8 · PRIMITIVOS DEL SISTEMA (tarjetas, filas, checkbox, FAB, botones suaves)
   Clases reutilizables para que las vistas nuevas (Foco, etc.) se sientan
   nativas al sistema y no como parches con estilos inline sueltos.
   ========================================================================== */
.k-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--k-r-lg);
  box-shadow: var(--k-shadow-sm);
}
/* Fila de lista dentro de una k-card (Inicio): sin recuadro interno, solo separador sutil + hover de marca */
.k-ini-item {
  background: none;
  cursor: pointer;
  border-radius: var(--k-r-sm);
  transition: background 120ms ease;
}
.k-ini-item + .k-ini-item {
  border-top: 1px solid var(--border);
}
.k-ini-item:hover {
  background: var(--primary-soft);
}

/* Chip de tag único (lista, kanban, detalle): se adapta al ancho, elipsis solo si no cabe, tooltip con el texto completo */
.k-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fg-soft);
  background: var(--surface-2);
  border: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* En listas el tag ocupa siempre el mismo espacio (caja fija), con elipsis — más ordenado */
.k-tag-fixed { display: block; width: 100%; text-align: center; }

/* Proyectos: cada uno en su propia tarjeta (no todos en un panel) */
.project-cards-stack { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.project-cards-stack .project-overview-row { border-radius: var(--k-r-lg); background: var(--surface); }
.project-card { padding: 1.1rem 1.25rem; }
.project-card.is-archived { opacity: 0.72; }
.pc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pc-titlewrap { min-width: 0; }
.pc-kicker { display: flex; flex-wrap: wrap; gap: 0.55rem; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); font-weight: 600; }
.pc-kicker > span + span::before { content: "·"; margin-right: 0.55rem; color: var(--border-strong); }
.pc-title { display: inline-block; font-size: 1.05rem; font-weight: 700; color: var(--fg); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; letter-spacing: -0.01em; margin-top: 0.2rem; }
.pc-title:hover { color: var(--primary); }
.pc-desc { font-size: 0.8rem; color: var(--fg-muted); margin: 0.2rem 0 0; }
.pc-headactions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.pc-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.85rem; font-size: 0.82rem; color: var(--fg-soft); }
.pc-metrics strong { color: var(--fg); font-weight: 700; }
.pc-metrics .is-danger,
.pc-metrics .is-danger strong { color: var(--bad); }
.pc-metrics .pc-sep { color: var(--border-strong); }
.pc-metrics .pc-muted { color: var(--fg-muted); }
.pc-progress { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
.pc-progress .project-progress-track { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pc-progress .project-progress-track > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.pc-progress > strong { font-size: 0.78rem; color: var(--fg-soft); flex: none; }
.pc-next { display: block; width: 100%; text-align: left; margin-top: 0.85rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--k-r-md); background: var(--surface-2); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.pc-next:hover { border-color: var(--primary); background: var(--primary-soft); }
.pc-next-label { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-muted); font-weight: 700; }
.pc-next-title { display: block; font-size: 0.9rem; font-weight: 600; color: var(--fg); margin-top: 0.1rem; }
.pc-next-detail { display: block; font-size: 0.78rem; color: var(--fg-muted); margin-top: 0.05rem; }
.pc-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.85rem; }
.pc-expand { font-size: 0.78rem; color: var(--primary); font-weight: 500; background: none; border: 0; cursor: pointer; padding: 0; }
.pc-expand:hover { text-decoration: underline; }
.pc-actions { display: flex; gap: 0.4rem; }
.pc-pending { margin-top: 0.85rem; border-top: 1px solid var(--border); padding-top: 0.35rem; }
.pc-pending-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-muted); font-weight: 700; margin: 0.35rem 0; }

/* Números de la tira de stats que enlazan a su lista */
.k-stat-link { cursor: pointer; border-radius: 0.55rem; padding: 0.15rem 0.4rem; margin: -0.15rem -0.4rem; transition: background 120ms ease; }
.k-stat-link:hover { background: var(--primary-soft); }
.k-stat-link:hover .k-stat-num { color: var(--primary); }

/* Formulario nuxt: textarea, selector de intención, agrupador details y caja de pista */
.k-textarea {
  width: 100%; min-height: 4.5rem; padding: 0.55rem 0.75rem;
  font: inherit; font-size: 0.9rem; color: var(--fg);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--k-r-md); transition: border-color 0.15s, box-shadow 0.15s; resize: vertical;
}
.k-textarea::placeholder { color: var(--fg-muted); }
.k-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.create-intent-btn {
  display: block; text-align: left; padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-strong); border-radius: var(--k-r-md);
  background: var(--surface); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.create-intent-btn:hover { border-color: var(--primary); }
.create-intent-btn.sel { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.create-intent-btn .cib-name { display: block; font-weight: 600; font-size: 0.82rem; color: var(--fg); }
.create-intent-btn .cib-desc { display: block; font-size: 0.7rem; color: var(--fg-muted); margin-top: 0.12rem; line-height: 1.3; }
.k-details { border: 1px solid var(--border); border-radius: var(--k-r-md); background: var(--surface); padding: 0.7rem 0.9rem; }
.k-details > summary { cursor: pointer; user-select: none; font-size: 0.85rem; font-weight: 600; color: var(--fg-soft); list-style: none; }
.k-details > summary::-webkit-details-marker { display: none; }
.k-details[open] > summary { margin-bottom: 0.8rem; }
.k-hint { border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--k-r-md); padding: 0.5rem 0.75rem; font-size: 0.75rem; color: var(--fg-soft); }

/* Enlace de texto: se lee como link (color de marca + flecha) */
.k-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--primary);
  background: none;
  border: 0;
  cursor: pointer;
}
.k-textlink::after { content: "\2192"; font-size: 0.9em; }
.k-textlink:hover { text-decoration: underline; }
.k-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--fg-muted);
}

/* Botón suave (acción primaria discreta, acento granate sobre superficie) */
.k-btn-soft {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: transparent;
}
.k-btn-soft:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.k-btn-sm { height: 2.1rem; padding: 0 0.75rem; font-size: 0.82rem; width: auto; }
.k-btn-ghost-quiet {
  background: transparent;
  color: var(--fg-soft);
  border-color: transparent;
  width: auto;
}
.k-btn-ghost-quiet:hover { background: var(--surface-2); color: var(--fg); }

/* Fila de tarea del foco */
.k-focus-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.k-focus-row:last-child { border-bottom: 0; }
.k-focus-row:hover { background: var(--surface-2); }
.k-focus-title { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--fg); }
.k-focus-row.is-done .k-focus-title { text-decoration: line-through; color: var(--fg-muted); }

/* Checkbox circular de completar */
.k-check {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.6px solid var(--border-strong);
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.k-check svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 3; fill: none; opacity: 0; }
.k-check:hover { border-color: var(--primary); }
.k-check.done { background: var(--ok); border-color: var(--ok); }
.k-check.done svg { opacity: 1; }

/* Botón de quitar (aparece en hover de la fila) */
.k-row-x {
  flex: none;
  color: var(--fg-muted);
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.k-focus-row:hover .k-row-x { opacity: 1; }
.k-row-x:hover { background: var(--surface-2); color: var(--fg); }

/* Barra de progreso fina */
.k-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.k-progress > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width 0.3s ease; }

/* Presets de arranque (estado vacío del foco): tarjetas seleccionables */
.k-preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.k-preset {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid var(--border);
  border-radius: var(--k-r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.k-preset:hover { border-color: var(--border-strong); }
.k-preset.sel { border-color: var(--primary); background: var(--primary-soft); }
.k-preset-name { font-weight: 600; font-size: 0.85rem; color: var(--fg); display: flex; align-items: center; gap: 0.4rem; }
.k-preset-name svg { width: 15px; height: 15px; stroke: var(--primary); stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.k-preset-desc { font-size: 0.72rem; color: var(--fg-muted); margin-top: 0.15rem; line-height: 1.35; }

/* Aro suave alrededor de un glifo hero (p.ej. la diana del foco) */
.k-hero-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
}

/* FAB — botón flotante del asistente/chat */
.k-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 30;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--primary-fg);
  cursor: pointer;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 38%, transparent), 0 2px 6px rgba(15, 23, 42, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.k-fab:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--primary) 45%, transparent), 0 4px 10px rgba(15, 23, 42, 0.14);
}
.k-fab:active { transform: translateY(0); }
.k-fab:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring), 0 10px 26px color-mix(in srgb, var(--primary) 38%, transparent); }
.k-fab svg { width: 1.4rem; height: 1.4rem; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* =============================================================================
   9 · PANEL DEL ASISTENTE (chat) — re-skin al sistema nuevo + menos densidad.
   Scopeado a #assistant-panel; re-tinta también las tarjetas que inyecta el JS.
   ========================================================================== */
#assistant-panel .ops-modal-panel {
  background: var(--surface);
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  box-shadow: -16px 0 40px rgba(15, 23, 42, 0.14);
  animation: assistant-slide-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes assistant-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
#assistant-panel .border-b,
#assistant-panel .border-t { border-color: var(--border) !important; }
#assistant-panel .bg-white { background: var(--surface) !important; }
#assistant-panel .bg-gray-50 { background: var(--surface-2) !important; }
#assistant-panel h3 { color: var(--fg) !important; }
#assistant-panel .text-gray-900,
#assistant-panel .text-gray-800 { color: var(--fg) !important; }
#assistant-panel .text-gray-600,
#assistant-panel .text-gray-500 { color: var(--fg-soft) !important; }
#assistant-panel .text-gray-400 { color: var(--fg-muted) !important; }
#assistant-panel code { background: var(--surface-2); color: var(--fg-soft); padding: 1px 5px; border-radius: 5px; font-size: .85em; }

/* Chips de comandos rápidos */
#assistant-panel [onclick^="fillAssistantCommand"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--k-r-sm) !important;
  color: var(--fg-soft) !important;
  padding: .22rem .55rem !important;
  font-size: 11px !important;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background .12s, color .12s, border-color .12s;
}
#assistant-panel [onclick^="fillAssistantCommand"]:hover {
  background: var(--surface-2) !important;
  color: var(--fg) !important;
  border-color: var(--border-strong) !important;
}

/* Input + botón Ejecutar */
#assistant-input {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--k-r-md) !important;
  color: var(--fg) !important;
}
#assistant-input:focus { outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--ring); }
#assistant-form button {
  background: var(--primary) !important;
  color: var(--primary-fg) !important;
  border-radius: var(--k-r-md) !important;
  font-weight: 600;
  border: none;
}
#assistant-form button:hover { background: var(--primary-hover) !important; }

/* Tarjetas de capacidades (JS): superficie sutil, no gris legacy */
#assistant-capabilities .rounded-lg { background: var(--surface-2) !important; border: 1px solid var(--border) !important; }

/* Capacidades colapsables: summary discreto */
#assistant-panel details.k-assist-caps > summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--fg-soft);
  padding: 2px 0;
  user-select: none;
}
#assistant-panel details.k-assist-caps > summary::-webkit-details-marker { display: none; }
#assistant-panel details.k-assist-caps > summary::before { content: "▸"; margin-right: .4rem; color: var(--fg-muted); }
#assistant-panel details.k-assist-caps[open] > summary::before { content: "▾"; }

/* =============================================================================
   10 · COLA — tira de stats compacta + banda de filtros más calmada.
   ========================================================================== */
/* Stats: de 4 tarjetas gigantes a una tira fina de números pequeños. */
#stats-bar { display: block; }
.k-statstrip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.k-statnums { display: flex; align-items: center; flex-wrap: wrap; }
.k-stat-chart { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.k-stat-chart svg { display: block; }
.k-chart-cap { font-size: 11px; color: var(--fg-soft); white-space: nowrap; }
.k-chart-cap span { color: var(--fg-muted); }
.k-chart-cap b { color: var(--fg); font-weight: 600; }
.k-stat { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.15rem 1.15rem; position: relative; }
.k-stat:first-child { padding-left: 0; }
.k-stat + .k-stat::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 1.1rem; width: 1px; background: var(--border);
}
.k-stat-num { font-size: 1.9rem; font-weight: 600; color: var(--fg); line-height: 1; letter-spacing: -0.01em; }
.k-stat-num small { font-size: 0.9rem; color: var(--fg-muted); font-weight: 500; }
.k-stat-lbl { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* Banda de filtros: menos aire vertical y peso, para que no compita con la lista. */
#filter-bar > div { padding-top: 0.7rem; padding-bottom: 0.7rem; }
#kb-col-filter:not(.hidden) { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* =============================================================================
   11 · TOPBAR — separación robusta de las acciones (no depende de gap-* de
   Tailwind, que en este build es incompleto y dejaba botones pegados/tocándose).
   ========================================================================== */
.k-topbar-actions { gap: 0.75rem; }
.k-topbar-actions > * { margin: 0; }
.k-topbar-status { gap: 0.5rem; }
#global-topbar #workspace-switcher { margin: 0; }
/* Padding vertical del topbar (py-3.5 no existe en el build → botones pegados al borde). */
/* Cabecera del sidebar y topbar a la misma altura → la línea inferior queda continua */
#sidebar .sidebar-head { min-height: 4rem; padding-top: 0; padding-bottom: 0; }
.k-topbar-inner { min-height: 4rem; padding-top: 0; padding-bottom: 0; }

/* Subpanel contextual (segundo raíl entre sidebar y main) */
#subpanel { width: 13.5rem; min-width: 13.5rem; background: var(--surface); border-color: var(--border); }
.subpanel-head { min-height: 4rem; display: flex; align-items: center; padding: 0 1.1rem; border-bottom: 1px solid var(--border); }
#subpanel-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-muted); }
.subpanel-body { padding: 0.85rem 0.7rem; }
.subpanel-group { margin-bottom: 1.1rem; }
.subpanel-group:last-child { margin-bottom: 0; }
.subpanel-group-title { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-muted); padding: 0 0.5rem; margin-bottom: 0.4rem; }
.subpanel-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; padding: 0.5rem 0.6rem; border: 0; border-radius: 0.55rem; font: inherit; font-size: 0.85rem; color: var(--fg-soft); background: none; cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.subpanel-item:hover { background: var(--primary-soft); color: var(--fg); }
.subpanel-item.is-primary { color: var(--primary); font-weight: 600; }
/* La seccion de Trabajo en la que estas. El subpanel es la navegacion aqui,
   asi que sin esta marca no sabrias donde te encuentras. */
.subpanel-item.is-active { background: var(--primary-soft); color: var(--fg); font-weight: 600; }
.subpanel-item.is-active::before { content: ""; width: 3px; align-self: stretch; border-radius: 2px; background: var(--primary); margin-right: 0.15rem; }
.subpanel-item-icon { display: inline-flex; width: 1rem; height: 1rem; flex: none; }
.subpanel-item-icon svg { width: 100%; height: 100%; }
.subpanel-empty { font-size: 0.8rem; color: var(--fg-muted); padding: 0.5rem; }

/* Toggle móvil del subpanel (oculto en escritorio) */
.subpanel-mobile-toggle { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--surface); color: var(--fg-soft); cursor: pointer; flex: none; }
.subpanel-mobile-toggle:hover { background: var(--primary-soft); color: var(--primary); }
body.auth-pending #subpanel { display: none; }

@media (max-width: 980px) {
  .subpanel-mobile-toggle { display: inline-flex; }
  #subpanel {
    position: fixed; left: 0.75rem; top: 0.75rem; bottom: 0.75rem;
    z-index: 45; border-radius: 0.75rem; border: 1px solid var(--border);
    transform: translateX(calc(-100% - 1.5rem));
    transition: transform 220ms ease;
    box-shadow: 12px 0 40px -16px rgba(0, 0, 0, 0.4);
  }
  body.subpanel-open #subpanel { transform: translateX(0); }}

/* Chip derivado de ciclo/foco (se calcula del cycle_id, no es un tag manual) */
.k-cycle-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 12rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--primary);
  background: var(--primary-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.k-cycle-chip svg { width: 11px; height: 11px; flex: none; }

/* Faceta derivada neutra (execution, modelo): leída de campos, no es tag manual */
.k-facet {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 10rem;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-soft);
  background: var(--surface-2);
  border: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.k-facet svg { width: 10px; height: 10px; flex: none; }

/* Offcanvas (slideover desde la derecha) dirigido por .hidden: convertir un modal = solo cambiar sus
   clases de contenedor (su open/close actual, que togglea .hidden, ya anima). Conserva .ops-modal para el re-tinte de botones. */
.ops-offcanvas { padding: 0 !important; transition: background-color 240ms ease; }
.ops-offcanvas.hidden {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
  background-color: transparent !important;
  transition: background-color 240ms ease, visibility 0s linear 300ms;
}
.ops-offcanvas:not(.hidden) { visibility: visible; pointer-events: auto; }
.ops-offcanvas .ops-offcanvas-panel {
  height: 100%;
  max-height: 100%;
  border-radius: 1rem 0 0 1rem !important;
  box-shadow: -18px 0 50px -20px rgba(0, 0, 0, 0.35) !important;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.ops-offcanvas:not(.hidden) .ops-offcanvas-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .ops-offcanvas,
.ops-offcanvas .ops-offcanvas-panel { transition: none; }}

/* Gráfico de actividad reutilizable (selector 7d/30d). */
.k-activity { display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.k-activity-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.k-activity-cap { font-size: 11px; color: var(--fg-soft); white-space: nowrap; }
.k-activity-cap b { color: var(--fg); font-weight: 600; }
.k-activity-cap span { color: var(--fg-muted); }
.k-activity-range { display: inline-flex; border: 1px solid var(--border); border-radius: var(--k-r-md); overflow: hidden; flex: none; }
.k-activity-range button { font-size: 11px; padding: 2px 9px; background: var(--surface); color: var(--fg-soft); border: 0; cursor: pointer; transition: background .12s, color .12s; }
.k-activity-range button + button { border-left: 1px solid var(--border); }
.k-activity-range button:hover { background: var(--surface-2); color: var(--fg); }
.k-activity-range button.sel { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.k-activity-chart { min-height: 64px; }

/* =============================================================================
   12 · COLA — banda Estado/Tipo (dos secciones) + conmutador Lista/Kanban.
   ========================================================================== */
.k-segment { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--k-r-md); overflow: hidden; flex: none; }
.k-segment button { font-size: 13px; padding: 5px 12px; background: var(--surface); color: var(--fg-soft); border: 0; cursor: pointer; transition: background .12s, color .12s; }
.k-segment button + button { border-left: 1px solid var(--border); }
.k-segment button:hover { background: var(--surface-2); color: var(--fg); }
.k-segment button.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.kb-filter-sect { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.kb-filter-div { width: 1px; height: 22px; background: var(--border); margin: 0 0.6rem; flex: none; }

/* ✕ para quitar filtros individuales (chips de contexto: proyecto/dpto/etc.) */
.queue-context-chip { display: inline-flex; align-items: center; gap: 6px; }
.qchip-x { border: 0; background: none; cursor: pointer; color: var(--fg-muted); font-size: 15px; line-height: 1; padding: 0 1px; border-radius: 4px; transition: color .12s, background .12s; }
.qchip-x:hover { color: var(--bad); background: var(--surface-2); }

/* =============================================================================
   13 · TOPBAR — botones de estado (Dispatch/Runtime) con "perfil" de color,
   selector de workspace con borde 2px, y radio de btn-* normalizado (8px).
   ========================================================================== */
/* btn-outline legacy usa 10px; lo igualamos a los filtros (8px). */
.btn-outline,
.btn-primary { border-radius: var(--k-r-md) !important; }

/* Botón de estado: fondo blanco, borde 2px de color (--st) que indica el estado,
   texto negro. Se usa en Dispatch (verde on / rojo off) y Runtime (verde ok / rojo blocked). */
.k-status-btn {
  background: var(--surface) !important;
  border: 2px solid var(--st, var(--border-strong)) !important;
  border-radius: var(--k-r-md) !important;
  color: var(--fg) !important;
  font-weight: 500;
  box-shadow: none !important;
  transition: border-color .15s, background .12s;
}
.k-status-btn:hover { background: var(--surface-2) !important; }

/* Selector de workspace: borde 2px, radio consistente. */
#workspace-switcher {
  border-width: 2px !important;
  border-color: var(--border-strong) !important;
  border-radius: var(--k-r-md) !important;
}

/* =============================================================================
   14 · TABLA DE LA COLA — refinamiento Nuxt (hover uniforme + cabecera limpia).
   ========================================================================== */
/* Hover uniforme y sutil (antes las filas de tono se teñían de marrón/azul/ámbar). */
.task-row:hover,
.task-row-tone-manual:hover,
.task-row-tone-auto:hover,
.task-row-tone-interactive:hover {
  background: var(--primary-soft) !important;
}
/* Cabecera de columnas: sobre superficie con hairline inferior (estilo Nuxt),
   texto muteado y menos grito (peso 500, sin fondo gris). */
.task-row-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg-muted) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
}

/* Chips de cabecera de grupo (status-badge: REVIEW/INBOX/NEXT…): un poco más de
   padding vertical y menos redondez. */
.status-badge {
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
}