@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* ===== Tokens (alineados al prototipo ECOREX.tareas) ===== */
:root {
  --radius: 0.875rem;
  --background: oklch(0.985 0.003 280);
  --foreground: oklch(0.2 0.04 280);
  --card: oklch(1 0 0);
  --primary: oklch(0.55 0.22 285);
  --primary-foreground: oklch(0.99 0.005 280);
  --primary-soft: oklch(0.96 0.025 285);
  --muted: oklch(0.97 0.008 280);
  --muted-foreground: oklch(0.5 0.025 280);
  --accent-foreground: oklch(0.4 0.18 285);
  --gold: oklch(0.78 0.14 70);
  --gold-foreground: oklch(0.22 0.04 70);
  --destructive: oklch(0.6 0.22 22);
  --warning: oklch(0.74 0.16 65);
  --warning-foreground: oklch(0.22 0.05 65);
  --success: oklch(0.62 0.16 155);
  --border: oklch(0.93 0.008 280);
  --sidebar: oklch(1 0 0);
  --sidebar-border: oklch(0.94 0.008 280);
  --shadow-soft: 0 1px 2px oklch(0.4 0.15 280 / 0.04), 0 1px 3px oklch(0.4 0.15 280 / 0.05);
  --shadow-card: 0 4px 24px -8px oklch(0.4 0.15 280 / 0.10);
  --gradient-violet: linear-gradient(135deg, oklch(0.6 0.22 285), oklch(0.45 0.24 290));
}

html, body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}

a, .btn-link { color: var(--primary); }
h1, h2, h3 { letter-spacing: -0.01em; }

/* FocusOnNavigate (Routes.razor) enfoca el primer h1 tras navegar para que los lectores de pantalla
   anuncien el titulo; eso le pone tabindex="-1" y el navegador dibuja un recuadro de foco feo en el h1.
   Mantenemos el foco (accesibilidad) pero ocultamos el recuadro en esos destinos NO interactivos.
   No afecta botones/inputs (no usan tabindex="-1"). */
[tabindex="-1"]:focus { outline: none; }

/* Acordeon de configuracion AVANZADA (colapsado por defecto -> oculta servidor/webhook). */
.cfg-accordion { border: 1px solid var(--border); border-radius: 0.9rem; background: var(--card); overflow: hidden; }
.cfg-accordion[open] { box-shadow: var(--shadow-soft); }
.cfg-accordion-summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; user-select: none; font-weight: 600; font-size: 13.5px; }
.cfg-accordion-summary::-webkit-details-marker { display: none; }
.cfg-accordion-summary:hover { background: var(--muted); }
.cfg-accordion-summary .cfg-accordion-chevron { transition: transform 0.2s; flex: none; color: var(--muted-foreground); }
.cfg-accordion[open] .cfg-accordion-summary .cfg-accordion-chevron { transform: rotate(90deg); }
.cfg-accordion[open] .cfg-accordion-summary { border-bottom: 1px solid var(--border); }
.cfg-accordion > .card { border: 0; box-shadow: none; margin: 14px !important; max-width: none !important; }
.cfg-accordion > .card:last-child { margin-bottom: 14px !important; }

/* ===== Layout shell ===== */
.ecorex-shell { display: flex; min-height: 100vh; }

.ecorex-sidebar {
  width: 268px;
  flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.ecorex-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ecorex-topbar {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: oklch(1 0 0 / 0.7);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.ecorex-content { padding: 26px 30px; width: 100%; }

/* Piezas del menu movil: ocultas en escritorio. */
.ecorex-nav-toggle { display: none; }
.ecorex-nav-overlay { display: none; }
.ecorex-hamburger { display: none; }
.ecorex-topbar-brand { display: none; }

/* ===== Sidebar header / brand ===== */
.ecorex-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--sidebar-border);
}
.ecorex-logo {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--gradient-violet);
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
  color: #fff;
}
.ecorex-logo svg { width: 18px; height: 18px; }
.ecorex-logo::after {
  content: ""; position: absolute; bottom: -2px; right: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--sidebar);
}
.ecorex-brand-name { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; line-height: 1; }
.ecorex-brand-name span { color: var(--primary); }
.ecorex-brand-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); font-weight: 600; margin-top: 3px; }

.ecorex-agency {
  margin: 12px 14px 4px;
  border-radius: 10px;
  background: var(--primary-soft);
  border: 1px solid oklch(0.55 0.22 285 / 0.15);
  padding: 10px 12px;
}
.ecorex-agency .lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: oklch(0.55 0.22 285 / 0.85); }
.ecorex-agency .name { font-size: 14px; font-weight: 600; }
.ecorex-agency .meta { font-size: 11px; color: var(--muted-foreground); }

/* ===== Sidebar nav ===== */
.ecorex-nav { flex: 1; overflow-y: auto; padding: 8px 10px; }
.ecorex-nav-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: oklch(0.5 0.025 280 / 0.8); padding: 14px 8px 6px;
}
.ecorex-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px;
  color: oklch(0.35 0.04 280); text-decoration: none;
  font-size: 13.5px; font-weight: 500; line-height: 1.2;
  transition: background .12s, color .12s;
}
.ecorex-nav-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }
.ecorex-nav-link:hover { background: var(--muted); color: var(--foreground); }
.ecorex-nav-link.active { background: var(--primary-soft); color: var(--accent-foreground); font-weight: 600; }
.ecorex-nav-link.active svg { opacity: 1; color: var(--primary); }
.ecorex-nav-badge { margin-left: auto; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 7px; background: oklch(0.55 0.22 285 / 0.12); color: var(--primary); }

/* ===== Sidebar footer (user) ===== */
.ecorex-user { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--sidebar-border); }
.ecorex-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, oklch(0.82 0.13 70), oklch(0.74 0.15 70)); color: var(--gold-foreground); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.ecorex-user .nm { font-size: 12.5px; font-weight: 600; }
.ecorex-user .rl { font-size: 11px; color: var(--muted-foreground); }
.ecorex-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-left: auto; }

/* topbar user chip */
.ecorex-user-chip { font-size: 13px; color: var(--muted-foreground); }
.ecorex-user-chip strong { color: var(--foreground); font-weight: 600; }

/* ===== Page header ===== */
.page-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--primary); }
.page-title { font-size: 1.7rem; font-weight: 800; margin: 4px 0 2px; }
.page-title span { color: var(--primary); }
.page-sub { font-size: 0.9rem; color: var(--muted-foreground); margin-bottom: 22px; }

/* ===== KPI cards ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; max-width: 1000px; }
.kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem; padding: 18px 20px; box-shadow: var(--shadow-soft); }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; }
.kpi-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
.kpi-icon svg { width: 18px; height: 18px; }
.kpi-icon.tone-primary { background: var(--primary-soft); color: var(--primary); }
.kpi-icon.tone-gold { background: oklch(0.78 0.14 70 / 0.16); color: var(--gold-foreground); }
.kpi-icon.tone-success { background: oklch(0.62 0.16 155 / 0.15); color: var(--success); }
.kpi-icon.tone-danger { background: oklch(0.6 0.22 22 / 0.10); color: var(--destructive); }
.kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); font-weight: 700; margin-top: 14px; }
.kpi-value { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-hint { font-size: 11px; color: var(--muted-foreground); }

/* ===== Cards (override bootstrap) ===== */
.card { border: 1px solid var(--border); border-radius: 1.1rem; box-shadow: var(--shadow-card); }
.card-title { font-weight: 700; letter-spacing: -0.01em; }

/* ===== Buttons (override bootstrap) ===== */
.btn { border-radius: 0.6rem; font-weight: 600; font-size: 0.875rem; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover, .btn-primary:focus { background: oklch(0.5 0.22 285); border-color: oklch(0.5 0.22 285); color: #fff; }
.btn-outline-secondary { color: var(--foreground); border-color: var(--border); background: var(--card); }
.btn-outline-secondary:hover { background: var(--muted); color: var(--foreground); }
.btn-outline-success { color: var(--success); border-color: oklch(0.62 0.16 155 / 0.5); }
.btn-outline-success:hover { background: var(--success); color: #fff; }
.btn-outline-danger { color: var(--destructive); border-color: oklch(0.6 0.22 22 / 0.5); }
.btn-outline-danger:hover { background: var(--destructive); color: #fff; }
.btn:focus, .btn:active:focus, .form-control:focus { box-shadow: 0 0 0 3px oklch(0.55 0.22 285 / 0.25); }

/* ===== Forms (override bootstrap) ===== */
.form-control { border-radius: 0.55rem; border-color: var(--border); font-size: 0.9rem; }
.form-control:focus { border-color: var(--primary); }
.form-label { font-size: 0.8rem; font-weight: 600; color: var(--muted-foreground); }

/* ===== Tables (override bootstrap) ===== */
.table { --bs-table-bg: transparent; color: var(--foreground); }
.table > thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.table > tbody td { border-bottom: 1px solid var(--border); padding: 12px 8px; vertical-align: middle; }
.table.table-hover > tbody > tr:hover > * { background: var(--muted); }

/* ===== Badges (override bootstrap bg-*) ===== */
.badge { font-weight: 700; font-size: 10.5px; padding: 4px 9px; border-radius: 7px; letter-spacing: 0.02em; }
.badge.bg-success { background: oklch(0.62 0.16 155 / 0.15) !important; color: var(--success) !important; }
.badge.bg-info { background: var(--primary-soft) !important; color: var(--primary) !important; }
.badge.bg-danger { background: oklch(0.6 0.22 22 / 0.12) !important; color: var(--destructive) !important; }
.badge.bg-warning { background: oklch(0.78 0.14 70 / 0.18) !important; color: var(--warning-foreground) !important; }
.badge.bg-secondary { background: var(--muted) !important; color: var(--muted-foreground) !important; }

.text-muted { color: var(--muted-foreground) !important; }

/* ===== Login ===== */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background:
  radial-gradient(1200px 600px at 50% -10%, oklch(0.93 0.05 285), transparent), var(--background); }
.login-card { width: 380px; background: var(--card); padding: 34px; border-radius: 1.25rem; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
.login-logo { width: 48px; height: 48px; border-radius: 14px; background: var(--gradient-violet); display: grid; place-items: center; color: #fff; margin-bottom: 16px; }
.login-logo svg { width: 22px; height: 22px; transform: rotate(-45deg); }
.login-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.login-title span { color: var(--primary); }

/* =====================================================================
   Auth (login/registro/recuperar/restablecer/activar) - lenguaje del
   prototipo maestro: split sobrio (aside de marca en --surface-2 con tile
   --ink + bullets de valor) y tarjeta del formulario sobre --bg. Todo con
   tokens: conmuta solo con html.dark. Markup compartido en AuthShell.razor.
   ===================================================================== */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--bg); color: var(--ink); font-family: 'Hanken Grotesk', system-ui, sans-serif; }

/* --- Panel izquierdo: marca sobria --- */
.auth-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(32px, 4vw, 56px); background: var(--surface-2); border-right: 1px solid var(--line); }
.auth-aside::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(640px 460px at 88% -12%, var(--brand-soft), transparent 70%),
              radial-gradient(560px 420px at -12% 104%, var(--surface-3), transparent 72%); }
.auth-brand { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.auth-brand-tile { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; box-shadow: var(--sh-sm); }
.auth-brand-logo-img { height: 44px; max-width: 170px; object-fit: contain; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); padding: 5px 9px; }
.auth-brand-text { display: flex; flex-direction: column; gap: 3px; }
.auth-brand-name { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.auth-brand-sub { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); }
.auth-aside-body { position: relative; z-index: 1; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.auth-aside-body h2 { font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); margin: 0; }
.auth-aside-body p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.auth-points { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 14px 0 0; padding: 0; }
.auth-point { display: flex; align-items: flex-start; gap: 12px; }
.auth-point-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); display: grid; place-items: center; box-shadow: var(--sh-sm); }
.auth-point-ico svg { width: 16px; height: 16px; }
.auth-point-text { display: flex; flex-direction: column; gap: 2px; }
.auth-point-text b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.auth-point-text span { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

/* --- Aside "ventana al producto": mockup estatico del tablero kanban (solo Login) ---
   Reusa la paleta exacta de .ab-* (columnas surface-3, tarjetas surface, barras de
   progreso t-blue/danger/t-amber/ok). El mockup asoma recortado y ligeramente rotado,
   como los hero de SaaS, con un fade en los bordes para dar profundidad. Conmuta solo
   con html.dark porque todo son tokens. */
.auth-aside-body-mock { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; max-width: 100%; }
.auth-mock-lead { display: flex; flex-direction: column; gap: 8px; max-width: 440px; }
.auth-mock-eyebrow { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); }
.auth-mock-value { font-size: clamp(19px, 1.9vw, 24px); font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink-2); margin: 0; }

/* Tarjeta ventana: la envolvemos en un marco que RECORTA el tablero y le pone un fade. */
.auth-mock-window { position: relative; border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-lg); overflow: hidden; transform: rotate(-1.1deg) translateX(6px); transform-origin: top left;
  max-height: 356px; }
.auth-mock-window::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, var(--surface-2) 99%),
             linear-gradient(90deg, transparent 78%, var(--surface-2) 100%); }
.auth-mock-topbar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.auth-mock-dots { display: inline-flex; gap: 6px; flex: none; }
.auth-mock-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.auth-mock-crumb { font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-mock-status { flex: none; margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--t-amber-bg); color: var(--t-amber); white-space: nowrap; }

.auth-mock-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.auth-mock-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.auth-mock-colhead { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.auth-mock-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.auth-mock-n { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--ink-3); background: var(--surface-3); border-radius: 999px; padding: 1px 6px; }
.auth-mock-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sh-sm); }
.auth-mock-card.is-done { opacity: 0.9; }
.auth-mock-title { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.auth-mock-prog { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); }
.auth-mock-prog strong { font-size: 11px; color: var(--ink-2); font-weight: 700; }
.auth-mock-bar { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.auth-mock-bar i { display: block; height: 100%; border-radius: 999px; }
.auth-mock-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.auth-mock-avs { display: inline-flex; }
.auth-mock-avs i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 8.5px; font-weight: 700; color: #fff; border: 1.5px solid var(--surface); margin-left: -6px; }
.auth-mock-avs i:first-child { margin-left: 0; }
.auth-mock-due { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.auth-mock-due svg { width: 11px; height: 11px; }
.auth-mock-due-done { color: var(--ink-3); }

.auth-mock-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; }
.auth-mock-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.auth-mock-pico { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); display: grid; place-items: center; box-shadow: var(--sh-sm); }
.auth-mock-pico svg { width: 14px; height: 14px; }

/* --- Panel derecho: tarjeta del formulario --- */
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px clamp(20px, 5vw, 64px); }
.auth-mobile-brand { display: none; }
.auth-card { width: 100%; max-width: 424px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad, 20px); box-shadow: var(--sh-md); padding: 34px 32px; }
.auth-pane-signup { display: none; }
.auth-shell.is-signup .auth-pane-login { display: none; }
.auth-shell.is-signup .auth-pane-signup { display: block; }
.auth-head { margin-bottom: 22px; }
.auth-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.auth-head p { font-size: 13.5px; color: var(--ink-2); margin: 0; }

/* --- Formulario --- */
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.auth-field input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 14px; font-family: inherit; transition: border-color 0.16s, box-shadow 0.16s; }
.auth-field input::placeholder { color: var(--ink-3); }
.auth-field input:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px var(--brand-soft); }
/* Autofill de Chrome/WebKit: sin fondo amarillo, respeta los tokens (tambien en dark). */
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 600000s 0s;
}
.auth-input-icon { position: relative; }
.auth-input-icon input { padding-right: 84px; }
.auth-eye { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 2px 0; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-3); cursor: pointer; transition: color 0.16s; }
.auth-eye:hover { color: var(--ink); }
.auth-submit { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border: none; border-radius: 12px; background: var(--brand); color: var(--on-brand); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: var(--sh-sm); transition: opacity 0.16s, transform 0.12s; }
.auth-submit:hover { opacity: 0.9; }
.auth-submit:active { transform: scale(0.99); }
.auth-submit svg { width: 15px; height: 15px; }
.auth-secondary { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.16s, color 0.16s; }
.auth-secondary:hover { background: var(--surface-2); color: var(--ink); }

/* --- Enlaces, alertas y piezas menores --- */
.auth-switch { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--ink-2); }
.auth-switch button { background: none; border: none; padding: 0; color: var(--ink); font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; margin-left: 4px; }
.auth-switch button:hover { text-decoration: underline; }
.auth-link { color: var(--ink); font-weight: 700; text-decoration: none; }
.auth-link:hover { color: var(--ink); text-decoration: underline; }
.auth-alert { padding: 11px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.auth-alert-error { background: var(--t-rose-bg); color: var(--danger); }
.auth-alert-ok { background: var(--t-green-bg); color: var(--ok); }
.auth-label-row { display: flex; justify-content: space-between; align-items: center; }
.auth-label-row label { flex: none; }
.auth-forgot { font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: color 0.16s; }
.auth-forgot:hover { color: var(--ink); text-decoration: underline; }
.auth-remember { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; user-select: none; }
.auth-remember input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; margin: 0; }
.auth-legal { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin: 2px 0 0; }
.auth-footer { text-align: center; font-size: 12px; color: var(--ink-3); }
.auth-providers { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.auth-provider { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); font-size: 13.5px; font-weight: 600; font-family: inherit; color: var(--ink); text-decoration: none; cursor: pointer; transition: background 0.16s, border-color 0.16s; }
.auth-provider:hover { background: var(--surface-2); color: var(--ink); }
.auth-provider[disabled] { opacity: 0.65; cursor: not-allowed; }
.auth-hint { margin: -6px 0 12px; font-size: 12px; color: var(--danger); }
.auth-input-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--t-rose-bg) !important; }
.auth-divider { position: relative; text-align: center; margin: 16px 0; }
.auth-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line); }
.auth-divider span { position: relative; background: var(--surface); padding: 0 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--ink-3); }

/* Foco visible con teclado en botones/enlaces del auth (los inputs ya traen anillo). */
.auth-shell button:focus-visible, .auth-shell a:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; border-radius: 8px; }

/* Movil/tablet: tarjeta centrada con la marca arriba, sin aside (el mockup del
   tablero pide ancho, asi que ocultamos el aside por debajo de 900px). */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-main { justify-content: flex-start; padding: 36px 16px 26px; }
  .auth-mobile-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .auth-mobile-brand .auth-brand-text { align-items: center; }
  .auth-card { padding: 26px 20px; }
}

/* ===== Pagina Marca (branding super admin) ===== */
.brand-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1000px) { .brand-cols { grid-template-columns: 1fr; } }
.brand-form { padding: 22px; }
.brand-logo-current { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px; border: 1px dashed var(--border); border-radius: 12px; }
.brand-logo-current img { height: 46px; max-width: 200px; object-fit: contain; }
.brand-preview { position: relative; }
/* Vista previa del aside de login (pagina Marca): mismo lenguaje sobrio del auth real. */
.brand-preview-aside { position: relative; overflow: hidden; border-radius: 16px; color: var(--ink); padding: 32px; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface-2, #FAFAFA); border: 1px solid var(--line, rgba(20,20,25,.07)); }
.brand-preview-aside::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 300px at 88% -12%, var(--brand-soft, #F2F2F1), transparent 70%),
              radial-gradient(380px 280px at -12% 104%, var(--surface-3, #F2F2F3), transparent 72%); }
.bp-brand { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.bp-brand img { height: 40px; max-width: 160px; object-fit: contain; background: var(--surface, #fff); border: 1px solid var(--line, rgba(20,20,25,.07)); padding: 5px 9px; border-radius: 9px; }
.bp-logo { width: 40px; height: 40px; border-radius: 11px; background: var(--ink, #1B1B1E); color: var(--on-brand, #fff); display: grid; place-items: center; }
.bp-logo svg { width: 19px; height: 19px; transform: rotate(-45deg); }
.bp-brand span { font-size: 1.2rem; font-weight: 800; color: var(--ink, #1B1B1E); }
.bp-body { position: relative; z-index: 1; }
.bp-body h3 { font-size: 1.6rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink, #1B1B1E); margin: 0 0 10px; }
.bp-body p { font-size: .92rem; line-height: 1.55; color: var(--ink-2, #5C5C66); margin: 0; }
.brand-preview-label { text-align: center; font-size: .76rem; color: var(--muted-foreground); margin-top: 10px; }

/* error boundary (keep functional) */
.blazor-error-boundary { background: var(--destructive); padding: 1rem; color: white; border-radius: 8px; }
.blazor-error-boundary::after { content: "Ha ocurrido un error."; }
.validation-message { color: var(--destructive); }

/* ===== Module header (icono + eyebrow + titulo + acciones), estilo prototipo ===== */
.module-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.module-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.module-icon svg { width: 19px; height: 19px; }
.module-eyebrow { display: flex; align-items: center; gap: 10px; }
.module-eyebrow span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--primary); }

/* ===== Plan cards (estilo prototipo) ===== */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 1100px; }
.plan-card { background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem; box-shadow: var(--shadow-soft); padding: 24px; display: flex; flex-direction: column; }
.plan-card.featured { border-color: oklch(0.55 0.22 285 / 0.4); box-shadow: 0 0 0 1px oklch(0.55 0.22 285 / 0.3), var(--shadow-card); }
.plan-card.gold { border-color: oklch(0.78 0.14 70 / 0.45); }
.plan-card .pname { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); font-weight: 700; }
.plan-card .pprice { font-size: 1.9rem; font-weight: 800; line-height: 1.15; margin-top: 4px; }
.plan-card .pprice small { font-size: 0.85rem; font-weight: 600; color: var(--muted-foreground); }
.plan-features { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px; font-size: 0.9rem; }
.plan-features li { display: flex; align-items: center; gap: 8px; }
.plan-check { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; }
.plan-edit { margin-top: 22px; }

/* ===== Modal ===== */
.modal-overlay { position: fixed; inset: 0; background: oklch(0.2 0.04 280 / 0.45); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 50; padding: 20px; }
/* pointer-events:auto anula el .modal-dialog de Bootstrap (que lo pone en none para
   dejar pasar el clic al backdrop); sin esto no se puede enfocar/escribir en los inputs. */
.modal-dialog { pointer-events: auto; background: var(--card); border-radius: 1.1rem; box-shadow: 0 16px 40px -12px oklch(0.42 0.22 285 / 0.28); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.modal-close { display: grid; place-items: center; width: 34px; height: 34px; margin: -6px -6px -6px 0; border-radius: 0.6rem; background: none; border: none; font-size: 1.4rem; color: var(--muted-foreground); cursor: pointer; line-height: 1; transition: background .15s, color .15s; }
.modal-close:hover { background: var(--muted); color: var(--foreground); }
.modal-body { padding: 20px 22px; }
/* Footer pegajoso (#6): el dialogo hace scroll (max-height 90vh); en tabletas/pantallas cortas los
   botones Guardar/Cerrar/Enviar quedaban debajo del pliegue. Sticky los mantiene siempre visibles. */
.modal-foot { position: sticky; bottom: 0; z-index: 1; display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px; border-top: 1px solid var(--border); background: var(--card); }
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ===== Placeholder "Proximamente" ===== */
.coming-soon { max-width: 1040px; border: 1px dashed var(--border); border-radius: 1.25rem; background: var(--card); padding: 56px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.coming-soon-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; margin-bottom: 16px; }
.coming-soon-icon svg { width: 26px; height: 26px; }
.coming-soon h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.coming-soon p { font-size: 0.9rem; color: var(--muted-foreground); margin: 6px 0 0; max-width: 420px; }

/* ===== Pares etiqueta/valor (config Wompi) ===== */
.wlbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); font-weight: 700; }
.wval { font-size: 0.92rem; font-weight: 600; margin-top: 2px; margin-bottom: 4px; }

/* ===== Mi cuenta (tenant) ===== */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; max-width: 1040px; }
.acct-logo { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 1px solid var(--border); background: var(--card); flex-shrink: 0; }
.acct-logo-empty { display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: var(--primary); background: var(--primary-soft); }

/* ===== Pipeline Kanban ===== */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.kb-col { flex: 0 0 270px; background: var(--muted); border: 1px solid var(--border); border-radius: 1rem; display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.kb-col.drop-hover { outline: 2px dashed var(--primary); outline-offset: -2px; }
.kb-col-head { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kb-col-title { font-weight: 700; font-size: 0.92rem; }
.kb-col-meta { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.kb-col-count { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.kb-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; flex: 1; min-height: 60px; }
.kb-card { background: var(--card); border: 1px solid var(--border); border-radius: 0.75rem; padding: 11px 12px; box-shadow: var(--shadow-soft); cursor: pointer; }
.kb-card:hover { border-color: oklch(0.55 0.22 285 / 0.4); }
.kb-card .nm { font-weight: 700; font-size: 0.9rem; }
.kb-card .meta { font-size: 11.5px; color: var(--muted-foreground); margin-top: 3px; }
.kb-card .val { font-weight: 700; font-size: 0.92rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kb-card .ase { width: 22px; height: 22px; border-radius: 50%; background: var(--gradient-violet); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.kb-cardrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kb-empty { font-size: 12px; color: var(--muted-foreground); text-align: center; padding: 14px 0; }

/* ===== Pipeline: tarjeta enriquecida (estilo prototipo) ===== */
.kb-card.stale { box-shadow: var(--shadow-soft), -3px 0 0 var(--destructive) inset; padding-left: 15px; border-color: oklch(0.6 0.22 22 / 0.35); }
.kb-top { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted-foreground); font-weight: 600; margin-bottom: 8px; gap: 8px; }
.kb-time { display: inline-flex; align-items: center; gap: 5px; }
.kb-time svg { width: 11px; height: 11px; }
.kb-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.kb-badge.stale { background: oklch(0.6 0.22 22 / 0.10); color: var(--destructive); }
.kb-badge svg { width: 10px; height: 10px; }
.kb-archive { margin-left: auto; background: none; border: none; padding: 2px; border-radius: 6px; color: var(--muted-foreground); cursor: pointer; display: inline-grid; place-items: center; opacity: 0.5; }
.kb-card:hover .kb-archive { opacity: 1; }
.kb-archive:hover { background: var(--muted); color: var(--destructive); }
.kb-archive svg { width: 14px; height: 14px; }

/* Lead con mensaje del cliente sin responder */
.kb-card.needsreply { background: oklch(0.97 0.045 50); border-color: oklch(0.72 0.16 55 / 0.55); box-shadow: var(--shadow-soft), -3px 0 0 oklch(0.7 0.17 50) inset; padding-left: 15px; }
.kb-card.needsreply:hover { border-color: oklch(0.7 0.17 50); }
/* Lead aun no abierto por este navegador: punto indicador + borde realzado (no compite con needsreply/stale) */
.kb-card.unseen { border-color: oklch(0.55 0.22 285 / 0.5); }
.kb-card.unseen .nm::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: oklch(0.55 0.22 285); vertical-align: middle; }
.kb-badge.reply { background: oklch(0.7 0.17 50 / 0.16); color: oklch(0.5 0.16 45); }
.kb-unread { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 2px; font-size: 11px; font-weight: 700; color: oklch(0.5 0.16 45); }
.kb-unread svg { width: 12px; height: 12px; }

/* Barra de busqueda + orden + filtros */
.pl-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; max-width: 840px; }
.pl-search { position: relative; flex: 1; min-width: 220px; display: flex; align-items: center; }
.pl-search svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted-foreground); }
.pl-search input { width: 100%; padding: 9px 32px 9px 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font-size: 13px; }
.pl-search-clear { position: absolute; right: 8px; border: none; background: none; font-size: 18px; line-height: 1; color: var(--muted-foreground); cursor: pointer; }
.pl-sort { display: flex; align-items: center; gap: 6px; }
.pl-sort-lbl { font-size: 12px; color: var(--muted-foreground); }
.pl-sort select { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; background: var(--card); }
.btn.pl-filt-on { border-color: var(--primary); color: var(--primary); }

.pl-filt-anchor { position: relative; }
.pl-filters { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 600px; max-width: 88vw; border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 16px 18px; box-shadow: var(--shadow-lg); }
.pl-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pl-filters-head > span { font-weight: 700; font-size: 13px; }
.pl-link { border: none; background: none; color: var(--primary); font-size: 12px; cursor: pointer; }
.pl-filt-group { margin-bottom: 12px; }
.pl-filt-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--muted-foreground); margin-bottom: 7px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pl-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-size: 12px; cursor: pointer; color: var(--foreground); }
.pl-fchip:hover { border-color: var(--primary); }
.pl-fchip.on { background: var(--accent); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.pl-fchip .dot { width: 8px; height: 8px; border-radius: 50%; }
.pl-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* ===== Agentes IA ===== */
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; max-width: 1040px; }
.ag-card { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 16px 18px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 6px; }
.ag-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
/* Boton de eliminar agente en la esquina superior derecha de la tarjeta. */
.ag-card-del { width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--muted-foreground); font-size: 16px; line-height: 1; display: inline-grid; place-items: center; cursor: pointer; padding: 0; transition: all 0.15s; }
.ag-card-del:hover { border-color: var(--destructive); color: var(--destructive); background: oklch(0.97 0.03 25); }
.ag-card-del:disabled { opacity: 0.4; cursor: not-allowed; }
.ag-provider { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); }
.ag-provider.p-claude { background: oklch(0.95 0.05 40); color: oklch(0.5 0.16 40); }
.ag-provider.p-gemini { background: oklch(0.95 0.05 255); color: oklch(0.5 0.16 255); }
.ag-provider.p-gpt { background: oklch(0.95 0.05 160); color: oklch(0.45 0.13 160); }
.ag-name { font-weight: 700; font-size: 15px; margin-top: 4px; }
.ag-role { font-size: 12px; color: var(--muted-foreground); }
.ag-prompt { font-size: 12px; color: var(--muted-foreground); margin: 6px 0; line-height: 1.45; min-height: 34px; }
.ag-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.ag-res { font-size: 11.5px; color: var(--muted-foreground); }
.ag-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.ag-switch input { opacity: 0; width: 0; height: 0; }
.ag-slider { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: .2s; cursor: pointer; }
.ag-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.ag-switch input:checked + .ag-slider { background: oklch(0.6 0.16 150); }
.ag-switch input:checked + .ag-slider::before { transform: translateX(18px); }
.ag-res-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ag-res-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); padding: 6px 6px; border-bottom: 1px solid var(--border); }
.ag-res-table td { padding: 6px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.form-control-sm { padding: 5px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 7px; width: 100%; background: var(--card); }
.ag-file { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.ag-fileinput { font-size: 11px; }

/* ===== Automatizaciones (workflows) ===== */
.auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; max-width: 980px; }
.auto-card { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 16px 18px; box-shadow: var(--shadow-soft); cursor: pointer; transition: border-color .15s; }
.auto-card:hover { border-color: oklch(0.55 0.22 285 / 0.4); }
.auto-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.auto-name { font-weight: 700; font-size: 14.5px; }
.auto-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auto-trig { background: var(--accent); color: var(--primary); border-radius: 9px; padding: 7px 11px; font-size: 12px; font-weight: 600; }
.auto-arrow { color: var(--muted-foreground); }
.auto-act { background: oklch(0.95 0.05 60); color: oklch(0.5 0.14 55); border-radius: 9px; padding: 7px 11px; font-size: 12px; font-weight: 600; }
.auto-exec { font-size: 11.5px; color: var(--muted-foreground); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.kb-route { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px dashed var(--border); border-radius: 8px; padding: 7px 10px; margin: 10px 0; background: var(--muted); font-size: 11.5px; }
.kb-route .codes { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.kb-route .codes .arr { color: var(--muted-foreground); }
.kb-route .date { color: var(--muted-foreground); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.kb-route .date svg { width: 11px; height: 11px; flex-shrink: 0; }
.kb-comment { font-size: 12px; color: var(--muted-foreground); line-height: 1.4; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 9px; border-top: 1px dashed var(--border); }
.kb-ase { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--foreground); font-weight: 600; min-width: 0; }
.kb-ase .nmtxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-ase-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.kb-pax { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted-foreground); font-weight: 600; white-space: nowrap; }
.kb-pax svg { width: 11px; height: 11px; }

/* ===== Ficha de lead con chat (estilo prototipo) ===== */
.pl-lead-dialog { max-width: 1400px; width: 96vw; display: flex; padding: 0; overflow: hidden; max-height: 94vh; height: 94vh; }
.pl-lead-left { flex: 1 1 55%; min-width: 0; display: flex; flex-direction: column; max-height: 94vh; }
.pl-lead-left .modal-body { flex: 1; overflow-y: auto; }
.pl-chat { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; max-height: 94vh; border-left: 1px solid var(--border); background: var(--muted); }
.pl-chat-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--card); }
.pl-chat-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gradient-violet); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.pl-chat-head .nm { font-weight: 700; font-size: 13px; line-height: 1.2; }
.pl-chat-head .sub { font-size: 11px; color: var(--muted-foreground); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.pl-chat-head .sub::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4f8a60; box-shadow: 0 0 0 2px rgba(79,138,96,0.2); }
.pl-chat-more { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--muted); font-size: 11px; color: var(--muted-foreground); cursor: default; flex-shrink: 0; }
.pl-chat-more svg { width: 12px; height: 12px; }
.pl-chat-line { margin-top: 6px; }
.pl-chat-line select { font-size: 11px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); width: 100%; }

/* Pestañas de la columna de datos del lead */
.pl-lead-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.pl-lead-tab { background: none; border: none; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--muted-foreground); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pl-lead-tab:hover { color: var(--foreground); }
.pl-lead-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Timeline de actividad */
.pl-timeline { display: flex; flex-direction: column; }
.pl-tl-item { display: flex; gap: 12px; padding: 4px 0; }
.pl-tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); margin-top: 5px; flex-shrink: 0; position: relative; }
.pl-tl-item:not(:last-child) .pl-tl-dot::after { content: ''; position: absolute; left: 50%; top: 13px; transform: translateX(-50%); width: 2px; height: calc(100% + 8px); background: var(--border); }
.pl-tl-body { padding-bottom: 14px; }
.pl-tl-desc { font-size: 13px; color: var(--foreground); }
.pl-tl-meta { font-size: 11.5px; color: var(--muted-foreground); margin-top: 2px; }
.pl-tl-actor { font-weight: 600; color: var(--primary); }

/* Chips de cabecera del lead */
.pl-tags { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pl-state-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: var(--accent); color: var(--primary); border: 1px solid var(--border); }
.pl-state-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.pl-chip { background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground); padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.pl-chip svg { width: 10px; height: 10px; }

/* Conmutador de vista Kanban / Lista */
.pl-view { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.pl-view-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: none; background: none; color: var(--muted-foreground); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pl-view-btn + .pl-view-btn { border-left: 1px solid var(--border); }
.pl-view-btn svg { width: 15px; height: 15px; }
.pl-view-btn.on { background: var(--primary); color: #fff; }

/* Vista lista del tablero */
.pl-list { border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; }
.pl-list-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pl-list-table th { text-align: left; padding: 11px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-foreground); border-bottom: 1px solid var(--border); }
.pl-list-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pl-list-table tbody tr:last-child td { border-bottom: none; }
.pl-list-table tbody tr:hover { background: var(--muted); }
.pl-list-table tr.pl-row-reply { background: color-mix(in srgb, var(--destructive) 6%, transparent); }
.pl-row-tag { margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--destructive); }

/* Filtros del modal de historial */
.pl-hist-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pl-hist-table th { white-space: nowrap; }

.btn-icon { background: none; border: none; padding: 5px; border-radius: 6px; color: var(--muted-foreground); cursor: pointer; display: inline-grid; place-items: center; }
.btn-icon:hover { background: var(--muted); color: var(--destructive); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* Notas de seguimiento del lead */
.pl-notes-composer { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--card); margin-bottom: 14px; }
.pl-notes-composer textarea { resize: vertical; }
.pl-notes-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.pl-notes-colors { display: flex; gap: 6px; }
.pl-note-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.pl-note-swatch.on { border-color: var(--foreground); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--foreground); }
.pl-notes-list { display: flex; flex-direction: column; gap: 10px; }
.pl-note { position: relative; border: 1px solid; border-radius: 10px; padding: 10px 30px 8px 12px; }
.pl-note-text { font-size: 13px; line-height: 1.45; color: #2a2a2a; white-space: pre-wrap; word-wrap: break-word; }
.pl-note-meta { margin-top: 6px; font-size: 11px; color: rgba(0,0,0,0.5); font-weight: 600; }
.pl-note-del { position: absolute; top: 6px; right: 8px; border: none; background: none; font-size: 17px; line-height: 1; color: rgba(0,0,0,0.35); cursor: pointer; }
.pl-note-del:hover { color: var(--destructive); }

/* Archivos del lead */
.pl-files-upload { margin-bottom: 14px; }
.pl-files-drop { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; border: 1.5px dashed var(--border); border-radius: 10px; background: var(--card); color: var(--muted-foreground); font-size: 13px; font-weight: 600; cursor: pointer; }
.pl-files-drop:hover { border-color: var(--primary); color: var(--primary); }
.pl-files-drop svg { width: 18px; height: 18px; }
.pl-files-list { display: flex; flex-direction: column; gap: 8px; }
.pl-file { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; background: var(--card); }
.pl-file-ico { width: 38px; height: 38px; flex: none; border-radius: 8px; background: var(--accent); color: var(--primary); display: grid; place-items: center; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; }
.pl-file-info { flex: 1; min-width: 0; }
.pl-file-name { display: block; font-size: 13px; font-weight: 600; color: var(--foreground); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-file-name:hover { color: var(--primary); text-decoration: underline; }
.pl-file-meta { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }

/* ===== Conversaciones (bandeja unificada) ===== */
.cv-warn { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; font-size: 13px; color: var(--muted-foreground); }
.cv-warn a { color: var(--primary); font-weight: 600; }
.cv-grid { display: grid; grid-template-columns: 320px 1fr 300px; gap: 16px; height: calc(100vh - 270px); min-height: 480px; }
@media (max-width: 1100px) { .cv-grid { grid-template-columns: 280px 1fr; } .cv-side-col { display: none; } }
.cv-back { display: none; }
@media (max-width: 768px) {
  /* Una sola columna a la vez: lista por defecto, hilo al elegir un chat. */
  .cv-grid { grid-template-columns: 1fr; height: auto; }
  .cv-list-col, .cv-thread-col { height: calc(100vh - 210px); min-height: 420px; }
  .cv-grid:not(.cv-has-active) .cv-thread-col { display: none; }
  .cv-grid.cv-has-active .cv-list-col { display: none; }
  .cv-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none; margin-left: -2px;
    border: 1px solid var(--border); border-radius: 9px; background: var(--card);
    color: var(--foreground); cursor: pointer;
  }
  .cv-back svg { width: 18px; height: 18px; }
}

.cv-list-col, .cv-thread-col, .cv-side-col { background: var(--card); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.cv-side-col { padding: 14px; gap: 14px; overflow-y: auto; }

.cv-search { position: relative; padding: 12px; border-bottom: 1px solid var(--border); }
.cv-search svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted-foreground); }
.cv-search input { width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 9px; background: var(--muted); padding: 0 10px 0 32px; font-size: 12.5px; }

.cv-list { flex: 1; overflow-y: auto; }
.cv-empty, .cv-side-empty { padding: 18px; font-size: 12.5px; color: var(--muted-foreground); }
.cv-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); padding: 11px 12px; cursor: pointer; }
.cv-item:hover { background: var(--muted); }
.cv-item.on { background: var(--accent); }
.cv-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--gradient-violet, linear-gradient(135deg,#7c4dff,#a78bfa)); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.cv-avatar.lg { width: 42px; height: 42px; font-size: 13px; }
.cv-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cv-item-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cv-item-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-item-time { font-size: 10px; color: var(--muted-foreground); flex: none; }
.cv-item-last { font-size: 11.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-item-tags { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.cv-line-tag { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: var(--muted); color: var(--muted-foreground); }
.cv-unread { font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--destructive); color: #fff; display: grid; place-items: center; }

/* Filtros de bandeja (activas/archivados + pipeline) */
.cv-filters { align-items: center; }
.cv-fchip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--foreground); cursor: pointer; line-height: 1.5; }
.cv-fchip:hover { background: var(--muted); }
.cv-fchip.on { background: var(--primary, #2563eb); color: #fff; border-color: var(--primary, #2563eb); }
/* Boton archivar/restaurar por conversacion (aparece al pasar el mouse) */
.cv-item { position: relative; }
.cv-item-arch { position: absolute; right: 8px; bottom: 9px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--muted-foreground); opacity: 0; transition: opacity .12s, background .12s; }
.cv-item:hover .cv-item-arch { opacity: 1; }
.cv-item-arch:hover { background: var(--muted); color: var(--foreground); }
/* Eliminar mensaje para todos + reaccion */
.cv-msg-del { background: none; border: none; color: inherit; opacity: 0.55; cursor: pointer; padding: 0 2px; margin-left: 6px; vertical-align: -2px; }
.cv-msg-del:hover { opacity: 1; }
.cv-bubble-reaction { display: inline-block; margin-top: 4px; font-size: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; line-height: 1.4; }

.cv-thread-empty, .cv-side-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted-foreground); font-size: 13px; text-align: center; padding: 24px; }
.cv-thread-empty svg { width: 46px; height: 46px; opacity: 0.4; }
.cv-thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.cv-th-name { font-size: 14px; font-weight: 700; }
.cv-th-sub { font-size: 11px; color: var(--muted-foreground); }
.cv-line-select { border: 1px solid var(--border); border-radius: 8px; font-size: 11.5px; padding: 5px 8px; background: var(--card); max-width: 150px; }
.cv-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 9px; background: var(--muted); }
.cv-composer { padding: 12px; border-top: 1px solid var(--border); }
.cv-composer-box { position: relative; display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--background, var(--card)); padding: 8px; }

/* Popup de comandos "/" (pregrabados) en el composer */
.slash-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,0.16); padding: 6px; z-index: 50; max-height: 300px; overflow-y: auto; }
.slash-pop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 8px 6px; font-size: 11px; color: var(--muted-foreground); }
.slash-pop-head span { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary, #2563eb); }
.slash-pop-head em { font-style: normal; font-size: 10.5px; }
.slash-item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name cat" "prev prev"; gap: 1px 8px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 7px 9px; cursor: pointer; }
.slash-item:hover, .slash-item.sel { background: var(--muted); }
.slash-item.sel { box-shadow: inset 0 0 0 1px var(--primary, #2563eb); }
.slash-name { grid-area: name; font-weight: 600; font-size: 13px; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slash-cat { grid-area: cat; font-size: 10.5px; color: var(--muted-foreground); white-space: nowrap; }
.slash-prev { grid-area: prev; font-size: 12px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-composer-box textarea { flex: 1; border: none; background: transparent; resize: none; font-size: 13px; outline: none; max-height: 120px; }
.cv-send { width: 38px; height: 38px; flex: none; border: none; border-radius: 9px; background: var(--primary); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cv-send:disabled { opacity: 0.5; cursor: not-allowed; }
.cv-send svg { width: 17px; height: 17px; }

.cv-context { border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.cv-ctx-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--muted-foreground); }
.cv-ctx-name { font-size: 15px; font-weight: 700; margin-top: 3px; }
.cv-ctx-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.cv-ctx-rows > div { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.cv-ctx-rows span { color: var(--muted-foreground); }
.cv-copilot { border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.cv-copilot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cv-bot { width: 26px; height: 26px; border-radius: 7px; background: var(--gold, #e9b949); color: #3a2c00; display: grid; place-items: center; }
.cv-bot svg { width: 15px; height: 15px; }
.cv-copilot-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); }
.cv-soon { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); }
.cv-copilot-note { font-size: 11.5px; color: var(--muted-foreground); line-height: 1.5; }
.cv-copilot-note a { color: var(--primary); font-weight: 600; }
.cv-dl { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 600; text-decoration: none; opacity: 0.85; }
.pl-bubble.in .cv-dl { color: var(--primary); }
.pl-bubble.out .cv-dl { color: rgba(255,255,255,0.92); text-decoration: underline; }

/* ===== Metricas / reportes ===== */
.rep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 900px) { .rep-grid { grid-template-columns: 1fr; } }
.rep-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.rep-card.rep-wide { grid-column: 1 / -1; }
.rep-title { font-size: 14px; font-weight: 700; }
.rep-sub { font-size: 11.5px; color: var(--muted-foreground); margin-bottom: 12px; }
.rep-empty { font-size: 12.5px; color: var(--muted-foreground); padding: 10px 0; }

.rep-bars { display: flex; flex-direction: column; gap: 9px; }
.rep-bar-row { display: grid; grid-template-columns: 120px 1fr 38px; align-items: center; gap: 10px; }
.rep-bar-lbl { font-size: 12px; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-bar-track { height: 16px; background: var(--muted); border-radius: 6px; overflow: hidden; }
.rep-bar { height: 100%; border-radius: 6px; min-width: 2px; background: var(--primary); transition: width .3s; }
.rep-bar.k-won { background: #3fae6b; }
.rep-bar.k-lost { background: #d0455f; }
.rep-bar.k-open { background: var(--primary); }
.rep-bar.k-loss { background: #d89a36; }
.rep-bar.k-dest { background: #4e80b5; }
.rep-bar-val { font-size: 12.5px; font-weight: 700; text-align: right; }

.rep-cols { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding-top: 10px; }
.rep-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.rep-col-val { font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.rep-col-bar-track { flex: 1; width: 60%; display: flex; align-items: flex-end; }
.rep-col-bar { width: 100%; min-height: 3px; background: var(--gradient-violet, linear-gradient(180deg,#7c4dff,#a78bfa)); border-radius: 6px 6px 0 0; transition: height .3s; }
.rep-col-lbl { font-size: 11px; font-weight: 600; margin-top: 6px; text-transform: capitalize; }
.rep-col-sub { font-size: 10px; color: var(--muted-foreground); }

.rep-mini-kpis { display: flex; gap: 10px; }
.rep-mini-kpis > div { flex: 1; background: var(--muted); border-radius: 10px; padding: 10px; text-align: center; }
.rep-mini-kpis .n { display: block; font-size: 20px; font-weight: 800; }
.rep-mini-kpis .l { display: block; font-size: 10.5px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* ===== Servidores de IA ===== */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 1100px; }
.ai-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.ai-card-head { display: flex; align-items: center; gap: 11px; }
.ai-logo { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: var(--primary); }
.ai-logo.p-claude { background: #d97757; }
.ai-logo.p-gemini { background: #4e80b5; }
.ai-logo.p-gpt { background: #10a37f; }
.ai-logo.p-deepseek { background: #4d6bfe; }
.ai-name { font-size: 14.5px; font-weight: 700; }
.ai-prov { font-size: 11px; color: var(--muted-foreground); }
.ai-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ai-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.ai-rows span { color: var(--muted-foreground); }
.ai-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: 6px 0 2px; cursor: pointer; }

/* Barra de cupo mensual de tokens */
.ag-quota-bar { height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; margin: 6px 0 4px; }
.ag-quota-fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s; }
.ag-quota-fill.over { background: var(--destructive); }

/* Editor de agente en dos columnas */
.ag-editor-cols { display: flex; gap: 18px; align-items: flex-start; }
.ag-editor-left { flex: 1; min-width: 0; }
.ag-editor-versions { width: 220px; flex: none; border-right: 1px solid var(--border); padding-right: 14px; align-self: stretch; max-height: 72vh; overflow: auto; }
.ag-editor-right { width: 380px; flex: none; border-left: 1px solid var(--border); padding-left: 18px; align-self: stretch; }
@media (max-width: 980px) { .ag-editor-cols { flex-direction: column; } .ag-editor-versions { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 14px; max-height: 220px; } .ag-editor-right { width: 100%; border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 14px; } }

/* Toolbar de editor de texto (prompts) */
.rt-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 5px; border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--muted); position: relative; }
.rt-btn { min-width: 28px; height: 26px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); cursor: pointer; font-size: 12px; line-height: 1; display: inline-grid; place-items: center; }
.rt-btn:hover { border-color: var(--primary); }
.rt-btn.on { background: var(--primary); color: #fff; }
.rt-toolbar + textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.rt-emojis { position: absolute; top: 34px; left: 5px; z-index: 5; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.rt-emoji { width: 28px; height: 28px; border: none; background: none; cursor: pointer; font-size: 16px; border-radius: 6px; }
.rt-emoji:hover { background: var(--muted); }

/* Listas de prompts y recursos del agente */
.ag-list { display: flex; flex-direction: column; gap: 8px; }
.ag-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--card); }
.ag-item-main { flex: 1; min-width: 0; }
.ag-item-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-item-sub { font-size: 11.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-rtype { flex: none; width: 38px; height: 26px; border-radius: 6px; background: var(--accent); color: var(--primary); font-size: 9.5px; font-weight: 800; display: grid; place-items: center; letter-spacing: 0.04em; }
/* Pill que marca un campo de cache como sticky (no actualizable durante la conversacion). */
.ag-pill-sticky { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; background: oklch(0.94 0.04 80); color: oklch(0.45 0.12 60); border: 1px solid oklch(0.85 0.07 80); vertical-align: middle; }

/* === Modulo Tableros (Kanban) === */
/* Vista lista de tableros (board picker). */
.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; max-width: 1280px; }
.tb-card { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 18px 20px; cursor: pointer; transition: all 0.15s; }
.tb-card:hover { border-color: var(--primary); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.tb-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tb-card-color { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.tb-card-name { font-weight: 700; font-size: 15.5px; }
/* Acciones de administracion (editar/eliminar) de la tarjeta de tablero. Se revelan al pasar
   el mouse para que la tarjeta siga leyendose como un acceso al tablero, no como una barra. */
.tb-card-actions { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity .15s ease; }
.tb-card:hover .tb-card-actions, .tb-card-actions:focus-within { opacity: 1; }
.tb-icon-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted-foreground); cursor: pointer; }
.tb-icon-btn svg { width: 14px; height: 14px; }
.tb-icon-btn:hover { background: var(--accent); color: var(--foreground); }
.tb-icon-btn.danger:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.tb-icon-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Editor de estados (columnas) dentro del modal de edicion del tablero. */
.tb-states { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px; }
.tb-states-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tb-states-empty { font-size: 12.5px; color: var(--muted-foreground); padding: 10px 0; }
.tb-state-list { display: flex; flex-direction: column; gap: 6px; }
.tb-state-row { display: flex; align-items: center; gap: 8px; }
.tb-state-order { display: flex; flex-direction: column; gap: 2px; }
.tb-state-order .tb-icon-btn { width: 22px; height: 15px; border-radius: 5px; }
.tb-state-order .tb-icon-btn svg { width: 11px; height: 11px; }
.tb-state-color { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; flex: none; }
.tb-state-row .form-control { flex: 1; }
.tb-state-done { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted-foreground); white-space: nowrap; cursor: pointer; }
.tb-states-hint { font-size: 11.5px; color: var(--muted-foreground); margin-top: 10px; }
/* Etiquetas permitidas por columna (restriccion): panel que se expande bajo la fila del estado. */
.tb-icon-btn.on { background: var(--accent); color: var(--foreground); border-color: var(--foreground); }
.tb-coltags { margin: 2px 0 6px 30px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; background: var(--accent); }
.tb-coltags-hint { font-size: 11.5px; color: var(--muted-foreground); margin-bottom: 8px; }
.tb-coltags-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-tagchip-wrap { display: inline-flex; align-items: center; }
.tb-tagchip { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px 0 0 999px; background: var(--card); font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.tb-tagchip:disabled { opacity: .55; cursor: default; }
/* Boton "x" para borrar la etiqueta del catalogo, pegado al chip. */
.tb-tagchip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 22px; padding: 0; border: 1px solid var(--border); border-left: none; border-radius: 0 999px 999px 0; background: var(--card); color: var(--muted-foreground); font-size: 14px; line-height: 1; cursor: pointer; font-family: inherit; }
.tb-tagchip-x:hover:not(:disabled) { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.tb-tagchip-x:disabled { opacity: .55; cursor: default; }
/* Alta rapida de etiqueta con color, dentro del panel de la columna. */
.tb-tagnew { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.tb-tagnew-row { display: flex; align-items: center; gap: 7px; }
.tb-tagnew-row .form-control { flex: 1; }
.tb-tagnew-swatch { width: 22px; height: 22px; border-radius: 6px; flex: none; border: 1px solid rgba(0,0,0,.12); }
.tb-tagnew-palette { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tb-tagnew-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.tb-tagnew-dot.on { border-color: var(--foreground); box-shadow: 0 0 0 2px var(--card) inset; }
.tb-card-desc { font-size: 12.5px; color: var(--muted-foreground); margin-bottom: 12px; min-height: 32px; }
.tb-card-foot { display: flex; gap: 8px; font-size: 11px; color: var(--muted-foreground); }
.tb-card-stat { background: var(--accent); padding: 3px 10px; border-radius: 999px; }

/* Toolbar superior del tablero (search + sort + view + filtros). */
.tb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 8px 10px; margin-bottom: 18px; box-shadow: var(--shadow-soft); flex-wrap: wrap; }
.tb-toolbar-search { position: relative; flex: 1; min-width: 240px; max-width: 420px; }
.tb-toolbar-search input { width: 100%; padding: 8px 12px 8px 36px; background: var(--muted); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.tb-toolbar-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.tb-toolbar-search .tb-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); width: 16px; height: 16px; }
.tb-toolbar-right { display: flex; align-items: center; gap: 12px; }
.tb-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-foreground); }
.tb-sort select { background: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 12.5px; }
.tb-view { display: flex; background: var(--muted); padding: 3px; border-radius: 8px; border: 1px solid var(--border); }
.tb-view button { background: transparent; border: 0; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted-foreground); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tb-view button.active { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-soft); }
.tb-view svg { width: 14px; height: 14px; }

/* Tablero Kanban (vista detalle). */
.tb-board { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 14px; min-height: 480px; }
.tb-col { width: 320px; min-width: 320px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 320px); }
.tb-col-drag { background: oklch(0.97 0.04 290); border: 2px dashed var(--primary); }
.tb-col-head { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: oklch(0.985 0 0); border-radius: 14px 14px 0 0; }
.tb-col-name { font-weight: 600; font-size: 14px; color: var(--foreground); }
.tb-col-count { background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.tb-col-body { padding: 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: oklch(0.99 0 0); }
.tb-col-empty { text-align: center; padding: 24px 12px; font-size: 12.5px; color: var(--muted-foreground); font-style: italic; }
.tb-col-foot { padding: 12px; border-top: 1px solid var(--border); background: var(--card); border-radius: 0 0 14px 14px; }
/* Boton compacto en el footer de cada columna: solo abre el modal de nueva tarea. */
.tb-col-add { width: 100%; padding: 6px 10px; border: 1px dashed var(--border); background: transparent; color: var(--muted-foreground); border-radius: 8px; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
.tb-col-add:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.tb-col-add-plus { font-size: 14px; font-weight: 700; line-height: 1; }
.tb-col-add svg { width: 12px; height: 12px; flex: none; }

/* Asegura que cualquier SVG inline en botones/listas del modulo Tableros no se infle. */
.tb-toolbar svg { width: 14px; height: 14px; flex: none; }
.tb-card-meta-item svg { width: 12px; height: 12px; flex: none; }
.tb-due svg { width: 12px; height: 12px; flex: none; }
.tb-modal-side-btn svg { width: 14px; height: 14px; flex: none; }
.tb-modal-add-btn svg { width: 14px; height: 14px; flex: none; }
.tb-modal-close svg { width: 18px; height: 18px; flex: none; }
.tb-pop svg { width: 14px; height: 14px; flex: none; }
.tb-check-item input[type="checkbox"] { flex: none; }
.tb-check-item-del svg { width: 14px; height: 14px; flex: none; }
.tb-modal-head-icon { width: 26px !important; height: 26px !important; }
.tb-modal-section-icon { width: 22px !important; height: 22px !important; }
/* Avatar SVG fallback (cuando no hay miembros). */
.tb-avatar.empty svg { width: 12px; height: 12px; flex: none; }

/* Tarjetas dentro de las columnas del Kanban. */
.tb-card-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: all 0.15s; box-shadow: 0 1px 2px oklch(0 0 0 / 0.04); }
.tb-card-item:hover { border-color: var(--primary); box-shadow: var(--shadow-soft); }
.tb-card-item.dragging { opacity: 0.5; }
.tb-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tb-tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: oklch(0.94 0 0); color: oklch(0.4 0.02 240); }
.tb-card-title { font-size: 13.5px; font-weight: 500; margin-bottom: 10px; line-height: 1.35; color: var(--foreground); }
.tb-card-meta { display: flex; gap: 12px; color: var(--muted-foreground); font-size: 11px; margin-bottom: 10px; align-items: center; }
.tb-card-meta-item { display: flex; align-items: center; gap: 3px; }
.tb-card-meta-item svg { width: 12px; height: 12px; }
.tb-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tb-members { display: flex; }
.tb-avatar { width: 24px; height: 24px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 9.5px; font-weight: 700; display: grid; place-items: center; margin-left: -6px; border: 2px solid var(--card); }
.tb-avatar:first-child { margin-left: 0; }
.tb-avatar.empty { background: transparent; border: 2px dashed var(--border); color: var(--muted-foreground); }
.tb-avatar.lg { width: 32px; height: 32px; font-size: 11.5px; }
.tb-due { font-size: 11px; color: var(--muted-foreground); display: flex; align-items: center; gap: 3px; }
.tb-due svg { width: 12px; height: 12px; }
.tb-due.late { color: var(--destructive); background: oklch(0.96 0.03 25); padding: 2px 7px; border-radius: 4px; }
.tb-card-new { background: var(--card); border: 1px solid var(--primary); border-radius: 10px; padding: 12px; }
.tb-card-new textarea { width: 100%; border: 0; outline: 0; font-size: 13.5px; resize: none; min-height: 60px; background: transparent; }
.tb-card-new-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }

/* Vista Lista (sustituye al Kanban cuando se elige). */
.tb-list { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.tb-list table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tb-list thead th { text-align: left; padding: 12px 16px; background: oklch(0.985 0 0); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }
.tb-list tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tb-list tbody tr:hover { background: var(--muted); cursor: pointer; }
.tb-list tbody tr:last-child td { border-bottom: 0; }
.tb-list-empty { padding: 32px; text-align: center; color: var(--muted-foreground); font-style: italic; }
.tb-status { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.tb-status.todo { background: var(--muted); color: var(--muted-foreground); }
.tb-status.progress { background: oklch(0.94 0.05 240); color: oklch(0.4 0.18 240); }
.tb-status.review { background: oklch(0.94 0.06 65); color: oklch(0.45 0.18 65); }
.tb-status.done { background: oklch(0.94 0.07 145); color: oklch(0.4 0.17 145); }

/* Modal detalle de tarjeta (2 columnas: contenido + sidebar). */
.tb-modal { width: 100%; max-width: 880px; background: oklch(0.98 0 0); border-radius: 14px; position: relative; }
.tb-modal-head { padding: 22px 28px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.tb-modal-head-icon { width: 26px; height: 26px; color: var(--muted-foreground); flex: none; margin-top: 2px; }
.tb-modal-head-content { flex: 1; }
.tb-modal-title { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin: 0 0 4px; color: var(--foreground); }
.tb-modal-subtitle { font-size: 13px; color: var(--muted-foreground); margin: 0; }
.tb-modal-subtitle strong { color: var(--foreground); text-decoration: underline; cursor: pointer; }
.tb-modal-close { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 999px; color: var(--muted-foreground); cursor: pointer; display: grid; place-items: center; transition: background 0.15s; flex: none; }
.tb-modal-close:hover { background: var(--muted); }
.tb-modal-body { display: flex; gap: 32px; padding: 8px 28px 28px; }
.tb-modal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.tb-modal-side { width: 200px; flex: none; display: flex; flex-direction: column; gap: 22px; }
.tb-modal-side h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); margin: 0 0 8px; }
.tb-modal-side-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: oklch(0.93 0 0); color: var(--foreground); border: 0; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s; }
.tb-modal-side-btn:hover { background: oklch(0.88 0 0); }
.tb-modal-side-btn svg { width: 14px; height: 14px; flex: none; }
.tb-modal-side-btn.danger { color: var(--foreground); }
.tb-modal-side-btn.danger:hover { background: oklch(0.95 0.04 25); color: var(--destructive); }
.tb-modal-side-btn.danger svg { color: var(--destructive); }
.tb-modal-side-divider { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

/* Secciones dentro del modal (members/tags/desc/checklist/activity). */
.tb-modal-section { display: flex; gap: 16px; align-items: flex-start; }
.tb-modal-section-icon { width: 22px; height: 22px; color: var(--muted-foreground); flex: none; margin-top: 4px; }
.tb-modal-section-body { flex: 1; min-width: 0; }
.tb-modal-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tb-modal-section-title { font-size: 1rem; font-weight: 600; color: var(--foreground); margin: 0; }
.tb-modal-section-action { padding: 5px 12px; background: oklch(0.93 0 0); color: var(--foreground); border: 0; border-radius: 4px; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 0.15s; }
.tb-modal-section-action:hover { background: oklch(0.88 0 0); }
.tb-modal-inline-row { display: flex; flex-wrap: wrap; gap: 24px; padding-left: 38px; }
.tb-modal-mini-h4 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); margin: 0 0 8px; }
.tb-modal-add-btn { width: 32px; height: 32px; border-radius: 999px; background: oklch(0.93 0 0); border: 0; display: grid; place-items: center; cursor: pointer; color: var(--muted-foreground); transition: background 0.15s; }
.tb-modal-add-btn:hover { background: oklch(0.88 0 0); }
.tb-modal-add-btn.sq { border-radius: 4px; width: 32px; height: 28px; }
.tb-modal-tag { font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 4px; background: oklch(0.91 0 0); color: var(--foreground); cursor: pointer; }
.tb-modal-tag:hover { opacity: 0.85; }

/* Descripcion. */
.tb-desc-empty { padding: 12px 14px; background: oklch(0.93 0 0); border-radius: 6px; color: var(--muted-foreground); font-size: 13px; cursor: pointer; transition: background 0.15s; }
.tb-desc-empty:hover { background: oklch(0.88 0 0); }
.tb-desc-text { font-size: 13.5px; color: var(--foreground); white-space: pre-wrap; line-height: 1.55; cursor: pointer; }
.tb-desc-edit { display: flex; flex-direction: column; gap: 8px; }
.tb-desc-edit textarea { width: 100%; min-height: 100px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; font-family: inherit; resize: vertical; }
.tb-desc-edit-actions { display: flex; gap: 8px; }

/* Checklist. */
.tb-check-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tb-check-progress-label { font-size: 11.5px; color: var(--muted-foreground); width: 36px; }
.tb-check-bar { flex: 1; height: 8px; background: oklch(0.92 0 0); border-radius: 999px; overflow: hidden; }
.tb-check-bar-fill { height: 100%; background: var(--primary); transition: width 0.3s; }
.tb-check-list { display: flex; flex-direction: column; gap: 4px; }
.tb-check-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; transition: background 0.15s; }
.tb-check-item:hover { background: oklch(0.93 0 0); }
.tb-check-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex: none; }
.tb-check-item-text { flex: 1; font-size: 13.5px; color: var(--foreground); }
.tb-check-item-text.done { color: var(--muted-foreground); text-decoration: line-through; }
.tb-check-item-del { background: transparent; border: 0; color: var(--muted-foreground); cursor: pointer; padding: 4px; border-radius: 4px; opacity: 0; transition: opacity 0.15s; }
.tb-check-item:hover .tb-check-item-del { opacity: 1; }
.tb-check-item-del:hover { color: var(--destructive); background: oklch(0.95 0.04 25); }
.tb-check-add { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tb-check-add input { flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }

/* Actividad (comentarios + log). */
.tb-act-input { display: flex; gap: 10px; margin-bottom: 18px; }
.tb-act-input-box { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: box-shadow 0.15s; }
.tb-act-input-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.tb-act-input-box textarea { width: 100%; min-height: 60px; padding: 10px 12px; border: 0; outline: 0; font-size: 13px; font-family: inherit; resize: none; }
.tb-act-input-foot { background: oklch(0.985 0 0); padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); }
.tb-act-list { display: flex; flex-direction: column; gap: 14px; }
.tb-act-item { display: flex; gap: 12px; }
.tb-act-item-avatar { width: 32px; height: 32px; border-radius: 999px; background: oklch(0.93 0 0); color: var(--muted-foreground); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.tb-act-item-bubble { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; flex: 1; box-shadow: 0 1px 2px oklch(0 0 0 / 0.04); max-width: 100%; }
.tb-act-item-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.tb-act-item-name { font-weight: 600; font-size: 13px; color: var(--foreground); }
.tb-act-item-time { font-size: 11px; color: var(--muted-foreground); }
.tb-act-item-text { font-size: 13px; color: var(--foreground); margin: 0; }
.tb-act-item-action { font-size: 13px; color: var(--muted-foreground); margin-top: 6px; }
.tb-act-item-action strong { color: var(--foreground); font-weight: 600; }

/* Popover de seleccion (miembros/etiquetas/datas). Posicionado DENTRO del modal a la izquierda del sidebar. */
.tb-pop { position: absolute; z-index: 60; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 32px oklch(0 0 0 / 0.18); padding: 14px 14px 12px; width: 280px; right: 232px; }
.tb-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tb-pop-title { font-size: 13px; font-weight: 600; color: var(--foreground); }
.tb-pop-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.tb-pop-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background 0.15s; font-size: 13px; }
.tb-pop-item:hover { background: var(--muted); }
.tb-pop-item.selected { background: var(--primary-soft); color: var(--primary); }
.tb-pop-add { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.tb-pop-add input { flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; }

/* Paleta de colores para titulo de tarjeta. */
/* Muestras de tamano FIJO: con "repeat(6, 1fr)" cada muestra crecia con el ancho del modal y
   en el editor (700px) quedaban enormes. Ahora fluyen y ocupan lo mismo en cualquier ancho. */
.tb-color-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-color-swatch { width: 22px; height: 22px; flex: none; border: 2px solid transparent; border-radius: 6px; cursor: pointer; padding: 0; transition: transform 0.1s, border-color 0.15s; }
.tb-color-swatch:hover { transform: scale(1.08); }
.tb-color-swatch.selected { border-color: var(--foreground); }
.tb-color-swatch.clear { background: var(--card); border: 1px dashed var(--border); color: var(--muted-foreground); font-size: 12px; font-weight: 700; display: grid; place-items: center; }

/* Configurar tablero (panel lateral). */
.tb-config { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 980px; }
.tb-config-section { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.tb-config-section h3 { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.tb-config-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.tb-config-row:last-child { border-bottom: 0; }
.tb-config-row .tb-color-dot { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.tb-config-row input[type="text"] { flex: 1; padding: 4px 8px; border: 1px solid transparent; border-radius: 4px; font-size: 13px; background: transparent; }
.tb-config-row input[type="text"]:focus { border-color: var(--primary); outline: 0; background: var(--muted); }

/* Entradas del log de prompts enviados a la IA (chat de prueba del agente). */
.ag-prompt-entry { border: 1px solid var(--border); border-radius: 10px; background: var(--card); padding: 10px 12px; }
.ag-prompt-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11.5px; }
.ag-prompt-entry-time { color: var(--muted-foreground); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }
.ag-prompt-entry-title { color: var(--primary); font-weight: 700; font-size: 11.5px; }
.ag-prompt-entry-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); margin: 4px 0 4px; }
.ag-prompt-entry textarea { resize: vertical; }

/* Scroll dentro de listas largas (recursos, cache fields). ~10 items visibles. */
.ag-list-scroll { max-height: 440px; overflow-y: auto; padding-right: 6px; }

/* Acordeon para colapsar secciones del editor de agente. */
.ag-accordion { border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.ag-accordion-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: transparent; border: 0; cursor: pointer; text-align: left; }
.ag-accordion-head:hover { background: var(--muted); }
.ag-accordion-chev { display: inline-block; transition: transform 0.15s ease; color: var(--muted-foreground); font-size: 12px; width: 14px; }
.ag-accordion-chev.open { transform: rotate(90deg); }
.ag-accordion-count { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--accent); color: var(--primary); font-size: 11px; font-weight: 700; }
.ag-accordion-spacer { flex: 1; }
.ag-accordion-body { padding: 4px 12px 14px; border-top: 1px solid var(--border); }

/* Chat de prueba del agente */
.ag-test { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ag-test-body { max-height: 380px; min-height: 160px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--muted); }
.ag-test-empty { color: var(--muted-foreground); font-size: 12.5px; text-align: center; margin: auto; font-style: italic; }
.ag-bubble { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.ag-bubble.me { align-self: flex-end; background: var(--gradient-violet, #7c4dff); color: #fff; border-bottom-right-radius: 4px; }
.ag-bubble.bot { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ag-bubble.ag-typing { color: var(--muted-foreground); font-style: italic; }
.ag-attach { margin-top: 6px; }
.ag-attach img, .ag-attach video { max-width: 200px; max-height: 200px; border-radius: 8px; display: block; }
.ag-attach audio { max-width: 220px; }
.ag-attach a { font-size: 12px; font-weight: 600; color: var(--primary); text-decoration: none; }
.ag-bubble.bot .ag-attach a { color: var(--primary); }
.ag-attach-text { background: rgba(0,0,0,0.04); border-left: 3px solid var(--primary); border-radius: 4px; padding: 6px 8px; font-size: 12.5px; white-space: pre-wrap; }
.ag-attach-cap { font-size: 12px; margin-top: 3px; }

/* Enviar prueba a telefono */
.ag-phone { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; background: var(--card); }
.ag-phone-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ag-phone-row { display: flex; gap: 6px; margin-top: 8px; }
.ag-phone-row .form-control { font-size: 12px; }
.ag-test-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--card); }
.ag-test-input input { flex: 1; }

/* Separador visual entre campos del lead (tipo de campo Separador) */
.pl-quote-tplsel { max-width: 200px; font-size: 12.5px; padding: 4px 8px; }
.pl-field-separator { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; color: var(--primary); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pl-field-separator::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pl-chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
/* Contenedor fijo (no hace scroll) para el chat: ancla el overlay de drag&drop a la vista visible */
.pl-chat-bodywrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Overlay para arrastrar y soltar documentos sobre la conversacion (visible aunque el chat este lleno) */
.pl-chat-dropmask { display: none; position: absolute; inset: 8px; z-index: 5; border: 2px dashed var(--primary); border-radius: 12px; background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary); font-weight: 700; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.pl-chat-bodywrap.pl-chat-dragover .pl-chat-dropmask { display: flex; }
.pl-date-divider { text-align: center; font-size: 10px; color: var(--muted-foreground); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin: 4px 0 2px; display: flex; align-items: center; gap: 10px; }
.pl-date-divider::before, .pl-date-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.pl-bubble { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; word-wrap: break-word; }
.pl-bubble .t { font-size: 9.5px; opacity: 0.7; margin-top: 3px; }
.pl-bubble.out { align-self: flex-end; background: var(--gradient-violet); color: #fff; border-bottom-right-radius: 4px; }
.pl-bubble.in { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.pl-chat-empty { color: var(--muted-foreground); font-size: 12px; text-align: center; margin: auto; font-style: italic; padding: 20px; }

/* Mensajes pregrabados con categorias */
.pl-chat-quick { padding: 10px 14px 6px; border-top: 1px solid var(--border); background: var(--card); }
.pl-qr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pl-qr-head > span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted-foreground); }
.pl-qr-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pl-qr-tab { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; color: var(--muted-foreground); font-weight: 700; border: none; background: none; cursor: pointer; letter-spacing: 0.02em; }
.pl-qr-tab:hover { color: var(--foreground); }
.pl-qr-tab.active { background: var(--primary); color: #fff; }
.pl-qr-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 116px; overflow-y: auto; }
.pl-quick-chip { font-size: 11.5px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--muted); color: var(--foreground); cursor: pointer; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-quick-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--accent); }
.pl-chat-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--card); align-items: center; }
.pl-chat-input input { flex: 1; border: 1px solid var(--border); border-radius: 999px; padding: 9px 14px; font-size: 13px; min-width: 0; }
.pl-quote-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--card); }
.pl-quote-actions .btn { font-size: 12.5px; padding: 7px 12px; }
.pl-quote-confirm { font-size: 12.5px; font-weight: 600; color: var(--foreground); }
.pl-quote-msg { font-size: 12px; color: var(--muted-foreground); }
.pl-chat-send { width: 38px; height: 38px; border-radius: 50%; background: var(--gradient-violet); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.pl-chat-send:disabled { opacity: 0.5; cursor: default; }
.pl-chat-send svg { width: 16px; height: 16px; }

/* Adjuntos */
.pl-attach { position: relative; flex-shrink: 0; }
.pl-attach-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground); display: grid; place-items: center; cursor: pointer; }
.pl-attach-btn:hover { color: var(--primary); border-color: var(--primary); }
.pl-attach-btn svg { width: 16px; height: 16px; }
.pl-attach-menu { position: absolute; bottom: 44px; left: 0; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 20; min-width: 150px; }
.pl-attach-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: var(--foreground); background: none; border: none; cursor: pointer; text-align: left; }
.pl-attach-item:hover { background: var(--muted); }
.pl-attach-item svg { width: 15px; height: 15px; color: var(--muted-foreground); }
.pl-media-img { max-width: 220px; max-height: 220px; border-radius: 8px; display: block; margin-bottom: 4px; }
.pl-media-doc { display: inline-block; font-size: 12.5px; text-decoration: underline; margin-bottom: 4px; }
.pl-bubble.out .pl-media-doc { color: #fff; }

/* Toggle Datos/Chat: solo visible en movil. */
.pl-lead-mobtabs { display: none; }
@media (max-width: 880px) {
    .pl-lead-dialog { flex-direction: column; max-height: 94vh; }
    .pl-lead-mobtabs { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); background: var(--card); flex: 0 0 auto; }
    .pl-lead-mobtabs button { flex: 1; padding: 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--muted); font-weight: 700; font-size: 13px; color: var(--muted-foreground); cursor: pointer; }
    .pl-lead-mobtabs button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    /* Mostrar solo el panel seleccionado y dejar que ocupe el alto disponible. */
    .pl-lead-dialog .pl-lead-left, .pl-lead-dialog .pl-chat { flex: 1 1 auto; max-height: none; min-height: 0; }
    .pl-lead-dialog.mob-datos .pl-chat { display: none; }
    .pl-lead-dialog.mob-chat .pl-lead-left { display: none; }
    .pl-chat { border-left: none; border-top: 1px solid var(--border); }
}

/* ===== Pipeline modal: campos por etapa ===== */
.pl-stagegroup { margin-bottom: 18px; }
.pl-stagegroup-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: var(--primary); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
.pl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl-field.col2 { grid-column: 1 / -1; }
/* Caption pegado a su texto de ayuda (menos separacion) */
.pl-field .form-label { margin-bottom: 1px; }
.pl-field-help { font-size: 11px; color: var(--muted-foreground); margin: 0 0 5px; font-style: italic; line-height: 1.25; }
/* Campo de moneda con simbolo como prefijo */
.pl-money-input { display: flex; align-items: stretch; }
.pl-money-input .pl-money-sign { flex: none; display: flex; align-items: center; padding: 0 9px; border: 1px solid var(--border); border-right: none; border-radius: 0.5rem 0 0 0.5rem; background: var(--muted); color: var(--muted-foreground); font-weight: 700; font-size: 12.5px; }
.pl-money-input input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pl-multi-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pl-multi-idx { flex: none; min-width: 22px; height: 22px; border-radius: 6px; background: var(--muted); color: var(--muted-foreground); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.pl-multi-del { flex: none; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--destructive); cursor: pointer; line-height: 1; font-size: 16px; }
.pl-multi-add { border: 1px dashed var(--border); border-radius: 7px; background: none; color: var(--primary); font-size: 12px; font-weight: 600; padding: 4px 10px; cursor: pointer; }
.cfg-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 5px; background: var(--primary-soft); color: var(--primary); margin-left: 6px; }
/* Boton Guardar con cambios pendientes en el modal del lead: color ambar para llamar la atencion. */
.pl-save-dirty { background: #f59e0b; border: 1px solid #f59e0b; color: #1f2937; font-weight: 700; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.pl-save-dirty:hover { background: #d97706; border-color: #d97706; color: #fff; }
.pl-saved-flag { font-size: 12px; font-weight: 600; color: #16a34a; display: inline-flex; align-items: center; gap: 4px; }
.pl-saved-flag::before { content: "✓"; font-weight: 700; }
/* Campo Total (solo lectura, calculado). */
.pl-total-field { background: var(--muted); font-weight: 700; color: var(--primary); }

/* Modulo Plantillas de cotizacion */
.pl-tpl-layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
.pl-tpl-list { padding: 14px; }
.pl-tpl-list-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); margin-bottom: 8px; }
.pl-tpl-item { display: block; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 10px; background: var(--card); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.pl-tpl-item.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pl-tpl-item .nm { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.pl-tpl-item .mt { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.pl-tpl-default { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 5px; background: var(--primary-soft); color: var(--primary); }
.pl-tpl-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.pl-tpl-html { font-family: var(--bs-font-monospace, monospace); font-size: 12.5px; line-height: 1.5; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.pl-tpl-vars { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.pl-tpl-vars-title { font-size: 11.5px; font-weight: 700; color: var(--muted-foreground); margin-bottom: 8px; }
.pl-tpl-vars-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-tpl-stage-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); margin: 8px 0 5px; opacity: .85; }
.pl-tpl-var { font-size: 11.5px; background: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; color: var(--primary); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.pl-tpl-var:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.pl-tpl-preview-head { padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--muted-foreground); background: var(--card); border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .04em; }
.pl-tpl-preview { width: 100%; height: 540px; border: 0; background: #fff; display: block; }
@media (max-width: 1100px) {
    .pl-tpl-layout { grid-template-columns: 1fr; }
    .pl-tpl-editor { grid-template-columns: 1fr; }
}
.pl-tpl-gallery { margin-top: 18px; padding: 18px; }
.pl-tpl-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pl-tpl-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.pl-tpl-asset { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.pl-tpl-asset-thumb { height: 110px; background: #f3f4f6 center/cover no-repeat; display: flex; align-items: center; justify-content: center; }
.pl-tpl-asset-thumb img { max-width: 100%; max-height: 110px; object-fit: contain; }
.pl-tpl-asset-name { font-size: 11.5px; padding: 6px 8px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tpl-asset-actions { display: flex; gap: 6px; padding: 6px 8px 8px; }
.pl-tpl-asset-actions .btn-sm { font-size: 11px; padding: 3px 7px; flex: 1; }
.cfg-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--card); margin-bottom: 6px; }
.cfg-row .grow { flex: 1; min-width: 0; }

/* ===== Nav: insignia "en construccion" ===== */
.ecorex-nav-soon { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 6px; background: var(--muted); color: var(--muted-foreground); }

/* Acordeon de la API de integracion en Mi cuenta (colapsado por defecto). */
.acct-api > summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acct-api > summary::-webkit-details-marker { display: none; }
.acct-api > summary::before { content: "\25B8"; color: var(--muted-foreground); margin-right: 8px; transition: transform .15s ease; }
.acct-api[open] > summary::before { transform: rotate(90deg); }
.acct-api > summary:hover { background: var(--muted); border-radius: 1.25rem; }

/* =====================================================================
   RESPONSIVE - moviles y tabletas (<= 991px): menu off-canvas + ajustes
   ===================================================================== */
@media (max-width: 991.98px) {
  /* El menu se vuelve un panel deslizable; oculto por defecto (se oculta solo). */
  .ecorex-sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh; height: 100dvh;
    width: 280px;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.18);
  }
  /* Abierto cuando el checkbox esta marcado. */
  .ecorex-nav-toggle:checked ~ .ecorex-sidebar { transform: translateX(0); }

  /* Capa oscura detras del menu abierto. */
  .ecorex-nav-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1040; border: 0; }
  .ecorex-nav-toggle:checked ~ .ecorex-nav-overlay { display: block; }

  /* Topbar: hamburguesa a la izquierda + marca, usuario a la derecha. */
  .ecorex-topbar { justify-content: flex-start; gap: 10px; padding: 0 14px; }
  .ecorex-hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: -6px;
    border-radius: 10px; cursor: pointer; color: var(--foreground);
  }
  .ecorex-hamburger:hover { background: var(--muted); }
  .ecorex-hamburger svg { width: 22px; height: 22px; }
  .ecorex-topbar-brand { display: inline-block; font-weight: 800; font-size: 15px; letter-spacing: -0.02em; }
  .ecorex-topbar-brand span { color: var(--primary); }
  .ecorex-topbar form { margin-left: auto; }            /* empuja "Salir" a la derecha */
  .ecorex-user-chip { display: none; }                   /* se oculta para no saturar */

  /* Mas aire util en pantallas chicas. */
  .ecorex-content { padding: 16px 14px; }
  .page-title { font-size: 1.5rem; }
  .module-head { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Rejillas comunes a una sola columna. */
  .ai-grid, .rep-grid, .brand-cols { grid-template-columns: 1fr !important; }

  /* Tablas anchas: que hagan scroll horizontal en vez de romper el layout. */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .ecorex-content .table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* Modales/cuadros anchos: que quepan en la pantalla. */
  .modal-dialog { margin: 10px; }
}

/* =====================================================================
   Menu del workspace (prototipo final ECOREX): buscador, codigos legacy,
   grupo colapsable CRM heredado, breadcrumbs y chip de stub.
   ===================================================================== */

/* Buscador global del sidebar (placeholder Cmd/Ctrl+K del prototipo). */
.ecorex-search { display: flex; align-items: center; gap: 8px; margin: 12px 14px 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--muted); color: var(--muted-foreground); }
.ecorex-search svg { width: 14px; height: 14px; flex-shrink: 0; }
.ecorex-search input { border: 0; background: none; outline: none; flex: 1; min-width: 0; font-size: 12.5px; color: var(--foreground); }
.ecorex-search input::placeholder { color: var(--muted-foreground); }
.ecorex-search .kbd { font-size: 9.5px; font-weight: 700; border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; background: var(--card); color: var(--muted-foreground); white-space: nowrap; }

/* Codigo del modulo legacy como referencia discreta a la derecha del item. */
.ecorex-nav-code { margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); font-variant-numeric: tabular-nums; opacity: .7; }
.ecorex-nav-link.active .ecorex-nav-code { color: var(--accent-foreground); opacity: .8; }

/* Grupo colapsable del CRM heredado (details/summary, sin JS). */
/* ===== Acordeones de MODULOS del sidebar (fuente ECOREX.dc.html): header
   9px/10px r10 13.5/600 ink-2 con icono coloreado + contador 10px + chevron
   15px rotado 180 al abrir; items indentados 19px con borde izquierdo line,
   7px/10px r8 12.5, codigo 9.5 ink-3 .75; activo surface-3 + ink + 600. ===== */
.ecorex-acc { margin: 0; }
.ecorex-acc > summary {
  list-style: none; width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 10px;
  cursor: pointer; user-select: none;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2, var(--foreground));
  margin-bottom: 1px;
}
.ecorex-acc > summary::-webkit-details-marker { display: none; }
.ecorex-acc > summary:hover { background: var(--surface-3, var(--muted)); }
.ecorex-acc-ico { flex: none; display: grid; place-items: center; }
.ecorex-acc-ico svg { width: 17px; height: 17px; }
.ecorex-acc.tv > summary .ecorex-acc-ico { color: var(--t-violet); }
.ecorex-acc.tb > summary .ecorex-acc-ico { color: var(--t-blue); }
.ecorex-acc.ts > summary .ecorex-acc-ico { color: var(--t-slate); }
.ecorex-acc.tr > summary .ecorex-acc-ico { color: var(--t-rose); }
.ecorex-acc.tg > summary .ecorex-acc-ico { color: var(--t-green); }
.ecorex-acc-name { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecorex-acc-count { font-size: 10px; color: var(--ink-3, var(--muted-foreground)); font-weight: 600; }
.ecorex-acc-chev { width: 15px; height: 15px; flex: none; color: var(--ink-3, var(--muted-foreground)); transition: transform .2s; }
.ecorex-acc[open] > summary .ecorex-acc-chev { transform: rotate(180deg); }
.ecorex-acc-body { margin: 1px 0 5px 19px; padding-left: 11px; border-left: 1px solid var(--line, var(--border)); }
.ecorex-acc-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2, var(--foreground));
  margin-bottom: 1px; text-decoration: none;
  transition: background .12s, color .12s;
}
.ecorex-acc-item:hover { background: var(--surface-3, var(--muted)); color: var(--ink, var(--foreground)); }
.ecorex-acc-item.active { background: var(--surface-3, var(--muted)); color: var(--ink, var(--foreground)); font-weight: 600; }
.ecorex-acc-item .lbl { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecorex-acc-item .code { font-size: 9.5px; color: var(--ink-3, var(--muted-foreground)); opacity: .75; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* Subgrupo dentro de un grupo de MODULOS (fuente: subgroups, ej. Comercial en Mis Procesos). */
.ecorex-acc-sub { margin: 0; }
.ecorex-acc-sub > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2, var(--foreground));
  margin-bottom: 1px; list-style: none; user-select: none;
}
.ecorex-acc-sub > summary::-webkit-details-marker { display: none; }
.ecorex-acc-sub > summary:hover { background: var(--surface-3, var(--muted)); }
.ecorex-acc-sub > summary .ecorex-acc-count { font-size: 9.5px; }
.ecorex-acc-sub > summary .ecorex-acc-chev { width: 13px; height: 13px; }
.ecorex-acc-sub[open] > summary .ecorex-acc-chev { transform: rotate(180deg); }
.ecorex-acc-sub-body { margin: 1px 0 4px 7px; padding-left: 11px; border-left: 1px solid var(--line, var(--border)); }

/* Breadcrumbs de pagina (prototipo: Equipos / SKY SYSTEM / seccion). */
.ecorex-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); margin-bottom: 16px; }
.ecorex-breadcrumb a { color: var(--muted-foreground); text-decoration: none; }
.ecorex-breadcrumb a:hover { color: var(--primary); }
.ecorex-breadcrumb .cur { color: var(--foreground); font-weight: 600; }
.ecorex-breadcrumb .sep { opacity: .55; }

/* Chip de referencia al modulo legacy en las cabeceras de stub. */
.stub-legacy { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--border); background: var(--muted); color: var(--muted-foreground); white-space: nowrap; }
.stub-legacy-note { margin-top: 10px !important; font-size: 11px !important; }

/* Telefonos pequenos. */
@media (max-width: 560px) {
  .ecorex-topbar-brand { font-size: 14px; }
  .ecorex-content { padding: 14px 11px; }
  .page-title { font-size: 1.32rem; }
  .page-sub { font-size: .86rem; }
  /* Formularios de 2 columnas (lead, etc.) a una sola columna. */
  .pl-fields { grid-template-columns: 1fr; }
}

/* ===== Nucleo de tareas (FASE 3): kanban de actividades, wizard y detalle ===== */

/* Numero consecutivo (T00001) y chips base */
.tk-number { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--primary); background: var(--primary-soft); padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Prioridad: Alta rojo / Media ambar / Baja verde */
.tk-priority { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.tk-priority.pr-high { background: oklch(0.6 0.22 22 / 0.12); color: var(--destructive); }
.tk-priority.pr-medium { background: oklch(0.78 0.14 70 / 0.2); color: oklch(0.5 0.13 65); }
.tk-priority.pr-low { background: oklch(0.62 0.16 155 / 0.15); color: var(--success); }

/* Chips clicables de prioridad del wizard (pastel) */
.tk-priority-pick { display: flex; gap: 8px; }
.tk-priority-opt { border: 1.5px solid var(--border); background: var(--card); border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .12s; }
.tk-priority-opt.pr-high { color: var(--destructive); }
.tk-priority-opt.pr-medium { color: oklch(0.5 0.13 65); }
.tk-priority-opt.pr-low { color: var(--success); }
.tk-priority-opt.on.pr-high { background: oklch(0.6 0.22 22 / 0.12); border-color: var(--destructive); }
.tk-priority-opt.on.pr-medium { background: oklch(0.78 0.14 70 / 0.22); border-color: oklch(0.6 0.13 65); }
.tk-priority-opt.on.pr-low { background: oklch(0.62 0.16 155 / 0.15); border-color: var(--success); }

/* Estado de tarea */
.tk-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tk-status.st-pending { background: var(--muted); color: var(--muted-foreground); }
.tk-status.st-active { background: oklch(0.94 0.05 240); color: oklch(0.4 0.18 240); }
.tk-status.st-progress { background: var(--primary-soft); color: var(--primary); }
.tk-status.st-done { background: oklch(0.94 0.07 145); color: oklch(0.4 0.17 145); }
.tk-status.st-suspended { background: oklch(0.94 0.06 65); color: oklch(0.45 0.18 65); }
.tk-status.st-closed { background: oklch(0.3 0.02 260 / 0.12); color: oklch(0.35 0.02 260); }
.tk-col-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: var(--muted-foreground); }
.tk-col-dot.st-pending { background: oklch(0.6 0.02 260); }
.tk-col-dot.st-active { background: oklch(0.55 0.18 240); }
.tk-col-dot.st-progress { background: var(--primary); }
.tk-col-dot.st-done { background: var(--success); }
.tk-col-dot.st-suspended { background: oklch(0.65 0.16 65); }

/* Estado de proyecto */
.tk-status.pj-planning { background: var(--muted); color: var(--muted-foreground); }
.tk-status.pj-active { background: oklch(0.94 0.07 145); color: oklch(0.4 0.17 145); }
.tk-status.pj-exec { background: oklch(0.94 0.05 240); color: oklch(0.4 0.18 240); }
.tk-status.pj-closed { background: oklch(0.3 0.02 260 / 0.12); color: oklch(0.35 0.02 260); }
.tk-status.pj-cancelled { background: oklch(0.6 0.22 22 / 0.12); color: var(--destructive); }

/* Tarjeta del kanban de actividades */
.tk-kb-card { border-left: 4px solid transparent; }
.tk-kb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }

/* Filtros combinables */
.tk-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.tk-filter-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tk-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-filter-select { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; background: var(--card); max-width: 220px; }
/* Cotizaciones del concepto (tarjetas) en el tab Formularios del detalle de la tarea. */
.tk-quote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 6px; }
.tk-quote-card { border: 1px solid var(--border); border-radius: 10px; background: var(--card); padding: 12px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .12s, border-color .12s; }
.tk-quote-card:hover { border-color: var(--brand, #6d5efc); box-shadow: var(--sh-sm, 0 1px 4px rgba(0,0,0,.06)); }
.tk-quote-card.is-final { background: color-mix(in srgb, var(--card) 92%, var(--muted-foreground)); }
.tk-quote-card.is-active { border-color: var(--brand, #6d5efc); box-shadow: inset 0 0 0 1px var(--brand, #6d5efc); }
.tk-quote-active { font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--brand, #6d5efc); background: color-mix(in srgb, var(--brand, #6d5efc) 14%, transparent); padding: 1px 8px; border-radius: 999px; }
.tk-quote-main { cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-quote-main > strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-quote-sub { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-quote-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.tk-quote-actions { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--border); padding-top: 8px; }
.btn-xs { font-size: 11.5px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); cursor: pointer; }
.btn-xs:hover { background: color-mix(in srgb, var(--card) 88%, var(--muted-foreground)); }
.btn-xs.tk-btn-danger { color: #c0392b; border-color: color-mix(in srgb, #c0392b 40%, var(--border)); }
.btn-xs.tk-btn-danger:hover { background: color-mix(in srgb, #c0392b 12%, var(--card)); }
.tk-filter-dates { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-foreground); }
.tk-filter-dates label { font-weight: 600; }

/* Errores de campo (wizard / formularios) */
.tk-field-error { color: var(--destructive); font-size: 12px; margin-top: 5px; font-weight: 500; }

/* Barra de pasos del wizard. NOTA: .tk-wizard ahora es el overlay full-screen del nuevo
   wizard (Ola 3); NO debe llevar max-width (antes limitaba el modal viejo a 620px). */
.tk-steps { display: flex; gap: 4px; padding: 14px 22px 0; }
.tk-step { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 2.5px solid var(--border); color: var(--muted-foreground); font-size: 12.5px; font-weight: 600; }
.tk-step.on { border-bottom-color: var(--primary); color: var(--primary); }
.tk-step.done { border-bottom-color: var(--success); color: var(--success); }
.tk-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--muted); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.tk-step.on .tk-step-num { background: var(--primary); color: #fff; }
.tk-step.done .tk-step-num { background: var(--success); color: #fff; }

/* Picker de etiquetas (chips + sugerencias) */
.tk-tagpicker { position: relative; }
.tk-tagpicker-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--border); border-radius: 0.55rem; padding: 7px 9px; background: var(--card); }
.tk-tagpicker-input { border: none; outline: none; flex: 1; min-width: 140px; font-size: 13px; background: transparent; }
.tk-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 5px; background: var(--muted); color: var(--foreground); margin-right: 2px; }
.tk-tag.tk-cc { background: var(--accent); color: var(--primary); }
.tk-tag-x { border: none; background: none; color: inherit; font-size: 13px; line-height: 1; cursor: pointer; padding: 0 1px; opacity: .75; }
.tk-tag-x:hover { opacity: 1; }
/* Edicion de etiquetas de la tarea en el detalle (varias por tarea; la columna puede restringir). */
.tk-tags-row .tk-tags-edit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; justify-content: flex-end; }
.tk-tag-remove { cursor: pointer; font-weight: 700; margin-left: 1px; opacity: .8; }
.tk-tag-remove:hover { opacity: 1; }
.tk-tags-none { font-size: 11.5px; color: var(--muted-foreground); }
.tk-tag-add-wrap { position: relative; display: inline-block; }
.tk-tag-add { border: 1px dashed var(--border); background: var(--card); color: var(--muted-foreground); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 5px; cursor: pointer; font-family: inherit; }
.tk-tag-add:hover { color: var(--foreground); border-color: var(--foreground); }
.tk-tag-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 170px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-card); padding: 5px; max-height: 220px; overflow-y: auto; }
.tk-tag-menu-empty { font-size: 11.5px; color: var(--muted-foreground); padding: 8px 10px; }
.tk-tag-menu-opt { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; border: none; background: none; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; color: var(--foreground); cursor: pointer; font-family: inherit; }
.tk-tag-menu-opt:hover { background: var(--accent); }
.tk-tag-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tk-tagpicker-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-card); padding: 5px; max-height: 210px; overflow-y: auto; }
.tk-tagpicker-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.tk-tagpicker-item:hover { background: var(--muted); }
.tk-cc-box { min-height: 40px; }

/* Resumen (paso 3 del wizard y card del detalle) */
.tk-summary { display: flex; flex-direction: column; gap: 8px; }
.tk-summary-row { display: flex; align-items: baseline; gap: 12px; font-size: 13px; }
.tk-summary-row > span:first-child { flex: none; width: 104px; overflow-wrap: anywhere; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--muted-foreground); }
.tk-summary-row strong { font-weight: 600; }
.tk-summary-desc { white-space: pre-wrap; }
.tk-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.tk-link:hover { text-decoration: underline; }

/* ===== Detalle de tarea (modal grande) ===== */
.tk-detail { width: 100%; max-width: 1060px; max-height: 92vh; overflow-y: auto; background: oklch(0.98 0 0); border-radius: 14px; position: relative; padding: 22px 26px 26px; }
/* ADR-0051: tarea de proceso -> modal mas ancho + card del diagrama del flujo. Solo aplica cuando
   .tk-detail-flow esta presente (tarea con flujo); el modal sin proceso queda intacto. */
.tk-detail.tk-detail-flow { max-width: 1200px; }

/* ADR-0051 (reestructura): modal con tabs (Detalle/Formularios/Documentos) + columna lateral de
   Bitacora. El layout con columna lateral pide mas ancho; la tarea de proceso suma el diagrama. */
.tk-detail.tk-detail-tabbed { max-width: 1440px; }
.tk-detail.tk-detail-tabbed.tk-detail-flow { max-width: 1520px; }
/* 3 columnas: contenido (1fr) | Resumen + Lista de chequeo (rail) | Bitacora (columna propia). */
.tk-detail-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px 320px; gap: 16px; align-items: start; }
/* Bitacora: SIEMPRE al alto del modal (columna fija) con scroll interno propio. */
.tk-detail-bitacora-col { min-width: 0; display: flex; flex-direction: column; position: sticky; top: 0; align-self: start; height: calc(92vh - 128px); overflow: visible; }
/* Angosto: la Bitacora baja a lo ancho debajo de las 2 columnas; mas angosto aun, una sola columna. */
@media (max-width: 1280px) {
    .tk-detail-split { grid-template-columns: minmax(0, 1fr) 300px; }
    /* Angosto: el modal scrollea como UN SOLO documento. Se anulan los sticky y las alturas
       fijas (rail Resumen + columna izquierda + Bitacora) para que al scrollear el Resumen no
       quede pegado arriba y NO se solape con la Bitacora que pasa por debajo. */
    .tk-detail-left { max-height: none; overflow: visible; }
    .tk-detail-rail { position: static; max-height: none; overflow: visible; }
    .tk-detail-bitacora-col { grid-column: 1 / -1; position: static; height: auto; max-height: none; overflow: visible; }
}
@media (max-width: 1080px) { .tk-detail-split { grid-template-columns: 1fr; } }
/* La 1a columna scrollea SOLA (asi se ve toda la data de la tarea) mientras Resumen y Bitacora quedan. */
.tk-detail-left { min-width: 0; display: flex; flex-direction: column; gap: 14px; max-height: calc(92vh - 128px); overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
.tk-detail-rail { min-width: 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; align-self: start; max-height: calc(92vh - 128px); overflow-y: auto; }
.tk-detail-bitacora { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sh-sm); }
/* Dentro de la columna Bitacora, la tarjeta llena el alto y su lista de actividad scrollea. */
.tk-detail-bitacora-col > .tk-detail-bitacora { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: visible; }
.tk-detail-bitacora-col > .tk-detail-bitacora > .tk-activity-list { flex: 1; min-height: 0; max-height: none; }
.tk-detail-bitacora > .tk-card-head { margin-bottom: 10px; }

/* Tabs */
.tk-detail-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tk-tab { appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted-foreground); cursor: pointer; border-radius: 8px 8px 0 0; }
.tk-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.tk-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.tk-tabpane { display: flex; flex-direction: column; gap: 14px; }

/* Documentos: barra de modos + galeria + visor con mini-galeria */
.tk-doc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tk-doc-modes { display: inline-flex; gap: 4px; padding: 3px; background: color-mix(in srgb, var(--line) 40%, transparent); border-radius: 10px; }
.tk-doc-mode { display: inline-flex; align-items: center; gap: 6px; appearance: none; background: transparent; border: none; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--muted-foreground); border-radius: 8px; cursor: pointer; }
.tk-doc-mode svg { width: 15px; height: 15px; }
.tk-doc-mode:hover:not(:disabled) { color: var(--ink); }
.tk-doc-mode.active { background: var(--surface); color: var(--brand); box-shadow: var(--sh-sm); }
.tk-doc-mode:disabled { opacity: .45; cursor: not-allowed; }
.tk-doc-count { font-size: 12px; color: var(--muted-foreground); }

.tk-doc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tk-doc-tile { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.tk-doc-tile:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); }
.tk-doc-thumb { height: 108px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--line) 30%, transparent); overflow: hidden; }
.tk-doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tk-doc-ext { font-size: 18px; font-weight: 800; letter-spacing: .5px; color: var(--brand); padding: 8px 12px; border: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 8px; background: var(--surface); }
.tk-doc-ext.sm { font-size: 10px; padding: 3px 5px; border-width: 1px; }
.tk-doc-ext.lg { font-size: 30px; padding: 14px 20px; }
.tk-doc-tile-name { font-size: 12px; font-weight: 600; color: var(--ink); padding: 8px 10px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-doc-tile-meta { font-size: 11px; color: var(--muted-foreground); padding: 0 10px 10px; }

.tk-doc-viewer { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; height: 460px; }
.tk-doc-filmstrip { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 4px; }
.tk-doc-frame { position: relative; flex: 0 0 auto; height: 68px; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--line) 30%, transparent); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.tk-doc-frame img { width: 100%; height: 100%; object-fit: cover; }
.tk-doc-frame:hover { border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.tk-doc-frame.active { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.tk-doc-stage { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.tk-doc-stage-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tk-doc-stage-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-doc-nav { appearance: none; border: 1px solid var(--line); background: var(--surface); width: 26px; height: 26px; border-radius: 7px; font-size: 16px; line-height: 1; color: var(--ink); cursor: pointer; }
.tk-doc-nav:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 10%, transparent); border-color: var(--brand); }
.tk-doc-nav:disabled { opacity: .4; cursor: not-allowed; }
.tk-doc-canvas { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--line) 22%, transparent); overflow: auto; }
.tk-doc-canvas img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tk-doc-canvas iframe { width: 100%; height: 100%; border: none; background: #fff; }
.tk-doc-noview { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 24px; color: var(--muted-foreground); font-size: 13px; }
@media (max-width: 720px) { .tk-doc-viewer { grid-template-columns: 1fr; height: auto; } .tk-doc-filmstrip { flex-direction: row; } .tk-doc-frame { width: 68px; } }

.tk-flow-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--sh-sm); margin-bottom: 16px; }
.tk-flow-cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tk-flow-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.tk-flow-hint { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.tk-flow-legend { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--ink-3); }
.tk-flow-legend span { display: flex; align-items: center; gap: 5px; }
.tk-flow-key { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.tk-flow-scroller { position: relative; overflow: auto; padding: 4px; border-radius: 14px; max-height: 60vh; }
.tk-flow-canvas { position: relative; min-width: 100%; border-radius: 14px; background-color: var(--surface-2); background-image: radial-gradient(rgba(128,128,135,0.18) 1px, transparent 1px); background-size: 20px 20px; }
.tk-flow-edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tk-flow-elabel { position: absolute; transform: translate(-50%, -50%); font-size: 10px; font-weight: 700; color: var(--ink-3); background: var(--surface); padding: 0 3px; border-radius: 3px; pointer-events: none; white-space: nowrap; }
.tk-flow-node { position: absolute; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 6px 16px -6px rgba(20,20,25,.22), 0 2px 5px -2px rgba(20,20,25,.14); display: flex; align-items: stretch; justify-content: flex-start; padding: 9px 10px; overflow: hidden; transition: box-shadow .12s, transform .12s; cursor: grab; }
.tk-flow-node:hover { box-shadow: 0 12px 26px -8px rgba(20,20,25,.30), 0 3px 8px -2px rgba(20,20,25,.18); transform: translateY(-1px); }
.tk-flow-node:active { cursor: grabbing; }
.tk-flow-node.dragging { opacity: 0.55; }
.tk-flow-node.gw, .tk-flow-node.ev { cursor: grab; }
.tk-flow-node.current { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), 0 10px 22px -8px rgba(20,20,25,.30); }
.tk-flow-node.done { background: var(--surface-2); }
/* ===== Nodo de AGENTE IA (paso automatico, ADR-0090): aspecto propio para que se lea de inmediato que
   ese paso lo ejecuta un agente, no una persona. Acento indigo, chip con robot, contador de tokens y,
   cuando es el paso vigente, un aura animada de "trabajando". ===== */
/* El nodo del agente es una tarjeta OSCURA (negro del aplicativo) con acento indigo: se diferencia de un
   golpe de las tarjetas humanas (claras). Texto e iconos en claro; los chips de capacidad llevan su color. */
.tk-flow-node.agent {
    --ai-accent: #818cf8; --ai-soft: rgba(129,140,248,.18);
    background: linear-gradient(180deg, #24243a 0%, #17171f 60%);
    border-color: #2c2c3d; color: #e7e7ef;
}
.tk-flow-node.agent .tk-flow-node-name { color: #f6f6fb; }
.tk-flow-node.agent .tk-flow-type { color: var(--ai-accent); background: rgba(129,140,248,.16); border-radius: 7px; }
.tk-flow-node.agent .tk-flow-dots { color: #b9b9c8; }
.tk-flow-node.agent .tk-flow-desc { color: #b9b9c8; }
.tk-flow-node.agent .tk-flow-metarow { color: #c8c8d6; }
.tk-flow-node.agent .tk-flow-metarow.wait { color: #f5b46b; }
.tk-flow-node.agent .tk-flow-hbadge.auto,
.tk-flow-node.agent .tk-flow-hbadge.cur { background: rgba(129,140,248,.22); color: #cdd2ff; }
.tk-flow-node.agent.done { background: linear-gradient(180deg, #22222e 0%, #16161d 60%); }
/* Chip de identidad del agente: nombre + tag IA + tokens */
.tk-flow-agentchip { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 700; color: #f2f2f8; max-width: 100%; }
.tk-flow-agentchip svg { width: 15px; height: 15px; flex: none; color: var(--ai-accent); }
.tk-flow-agentchip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-flow-agentchip .ia { flex: none; padding: 0 5px; border-radius: 5px; background: var(--ai-accent); color: #17171f; font-size: 9px; font-weight: 800; letter-spacing: .4px; }
.tk-flow-tokpill { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: rgba(129,140,248,.20); color: #cdd2ff; font-size: 10px; font-weight: 700; flex: none; letter-spacing: .2px; }
/* Fila de capacidades del agente (Colmena/Voz/WhatsApp/Correo) */
.tk-flow-caps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tk-flow-caps .cap { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); }
.tk-flow-caps .cap svg { width: 11px; height: 11px; flex: none; }
.tk-flow-caps .cap.web { color: #a5b4fc; } .tk-flow-caps .cap.web svg { color: #a5b4fc; }
.tk-flow-caps .cap.voice { color: #7dd3fc; } .tk-flow-caps .cap.voice svg { color: #7dd3fc; }
.tk-flow-caps .cap.wa { color: #86efac; } .tk-flow-caps .cap.wa svg { color: #86efac; }
.tk-flow-caps .cap.mail { color: #fcd34d; } .tk-flow-caps .cap.mail svg { color: #fcd34d; }
/* Linea "trabajando" con puntos animados */
.tk-flow-thinking { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--ai-accent); }
.tk-flow-thinking .dots { display: inline-flex; gap: 3px; }
.tk-flow-thinking .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ai-accent); display: inline-block; animation: tkThink 1.1s infinite ease-in-out; }
.tk-flow-thinking .dots i:nth-child(2) { animation-delay: .18s; }
.tk-flow-thinking .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes tkThink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
/* Capa 2: el "pensamiento" del agente en vivo -- letras claras semi-transparentes que aparecen con un fade
   cada vez que cambia la frase (el @key re-monta el span y repite la animacion). */
.tk-flow-thinking .think-txt { font-weight: 500; font-style: italic; letter-spacing: .1px;
    color: rgba(226, 232, 240, .72); max-width: 174px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; animation: tkThinkIn .55s ease-out; }
@keyframes tkThinkIn { 0% { opacity: 0; transform: translateY(2px); } 60% { opacity: .38; } 100% { opacity: .72; transform: none; } }
/* El agente ya intento y NO pudo: en vez del aura "trabajando", el nodo avisa que requiere una persona. */
.tk-flow-failed { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; font-weight: 600; color: #fbbf24; }
.tk-flow-failed svg { width: 13px; height: 13px; flex: none; }
.tk-flow-node.agent-failed { border-color: #d97706; box-shadow: 0 0 0 1px #d97706, 0 8px 22px -8px rgba(0,0,0,.5); }
.tk-flow-node.working { border-color: var(--ai-accent); animation: tkAura 1.8s infinite ease-in-out; }
/* Plazos v2 (ADR-0119): agente PROGRAMADO (aun no arranca, espera su StartAt). Sin aura/animacion
   -> deja claro que NO esta trabajando todavia, solo en espera de su hora. */
.tk-flow-scheduled { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--ink-3, #94a3b8); }
.tk-flow-scheduled svg { width: 13px; height: 13px; flex: none; }
.tk-flow-node.scheduled { border-color: var(--line-2, #e5e7eb); border-style: dashed; }
@keyframes tkAura { 0%, 100% { box-shadow: 0 0 0 1px var(--ai-accent), 0 8px 22px -8px rgba(0,0,0,.55); } 50% { box-shadow: 0 0 0 1px var(--ai-accent), 0 0 0 6px var(--ai-soft), 0 12px 26px -8px rgba(0,0,0,.6); } }
/* Rama DESCARTADA (ADR-0073): la compuerta tomo otra ruta -> el nodo se atenua en gris. Sigue siendo
   consultable (menu/notas), pero visualmente queda claro que el proceso no paso por ahi. */
.tk-flow-node.abandoned { opacity: 0.5; filter: grayscale(1); }
.tk-flow-menu { cursor: default; }
.tk-flow-node.gw, .tk-flow-node.ev { background: none; border: none; box-shadow: none; padding: 0; overflow: visible; align-items: center; justify-content: center; }
/* Compuerta (diamante) y evento (aro): el shape ES el boton que abre el menu; el icono va dentro. */
.tk-flow-gw { width: 74%; height: 74%; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 7px; box-shadow: var(--sh-sm); transform: rotate(45deg); display: grid; place-items: center; padding: 0; cursor: pointer; appearance: none; transition: box-shadow .12s, transform .12s; }
.tk-flow-gw svg { width: 42%; height: 42%; transform: rotate(-45deg); }
.tk-flow-gw:hover { box-shadow: 0 6px 16px -6px rgba(20,20,25,.28); }
.tk-flow-node.gw.current .tk-flow-gw { box-shadow: 0 0 0 2px var(--brand-soft); }
.tk-flow-gw-dots { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tk-flow-ev-dot { width: 68%; height: 68%; border-radius: 50%; border: 2px solid var(--ink-3); background: var(--surface); box-shadow: var(--sh-sm); display: grid; place-items: center; padding: 0; cursor: pointer; appearance: none; transition: box-shadow .12s, transform .12s; }
.tk-flow-ev-dot svg { width: 44%; height: 44%; }
.tk-flow-ev-dot.end { border-width: 2.5px; }
.tk-flow-ev-dot:hover { box-shadow: 0 6px 16px -6px rgba(20,20,25,.28); }
.tk-flow-node.ev.current .tk-flow-ev-dot { box-shadow: 0 0 0 2px var(--brand-soft); }
/* Etiqueta bajo compuertas/eventos: nombre en negrita + subtitulo de ayuda semantico. */
.tk-flow-nodelabel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px; text-align: center; white-space: nowrap; pointer-events: none; display: flex; flex-direction: column; gap: 1px; }
.tk-flow-nodelabel .nm { font-size: 11.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; color: var(--ink); }
.tk-flow-nodelabel .sub { font-size: 9.5px; font-weight: 500; line-height: 1.1; color: var(--ink-3); }
.tk-flow-node-body { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* NIVEL 1 -- encabezado: icono de tipo + titulo (flex) + badge de estado + menu. */
.tk-flow-node-head { display: flex; align-items: center; gap: 6px; }
.tk-flow-node-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.tk-flow-node-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Icono por TIPO (auto = rayo, manual = documento) en tile sutil con el acento del nodo. */
.tk-flow-type { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--node-accent, var(--ink-2)); background: color-mix(in srgb, var(--node-accent, var(--ink-3)) 12%, var(--surface)); }
.tk-flow-type svg { width: 13px; height: 13px; }
/* Badge de estado: pildora calmada (fondo tenue + texto del acento), NO relleno saturado. */
.tk-flow-hbadge { flex: none; align-self: flex-start; font-size: 8.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; line-height: 1.3; color: var(--node-accent, var(--ink-2)); background: color-mix(in srgb, var(--node-accent, var(--ink-3)) 13%, var(--surface)); white-space: nowrap; }
.tk-flow-hbadge.cur { color: var(--brand); background: var(--brand-soft); }
.tk-flow-hbadge.done { color: var(--t-green); background: var(--t-green-bg, color-mix(in srgb, var(--t-green) 14%, var(--surface))); }
.tk-flow-hbadge.auto { color: var(--t-blue); background: var(--t-blue-bg, color-mix(in srgb, var(--t-blue) 14%, var(--surface))); }
.tk-flow-hbadge.manual { color: var(--t-violet); background: var(--t-violet-bg, color-mix(in srgb, var(--t-violet) 14%, var(--surface))); }
.tk-flow-hbadge.gw { color: var(--t-violet); background: var(--t-violet-bg, color-mix(in srgb, var(--t-violet) 14%, var(--surface))); }
/* Descripcion del paso (secundaria, 2 lineas). */
.tk-flow-desc { font-size: 11px; line-height: 1.35; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* NIVEL 3 -- resumen de notas: caja sutil con borde-izq del acento; abre el hilo (popover) al clic. */
.tk-flow-notes { background: var(--surface-2); border-left: 3px solid var(--node-accent, var(--brand)); border-radius: 8px; padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.tk-flow-notes:hover { background: var(--surface-3); }
.tk-flow-notes-head { display: flex; align-items: center; gap: 5px; }
.tk-flow-notes-head svg { width: 11px; height: 11px; flex: none; color: var(--node-accent, var(--ink-2)); }
.tk-flow-notes-title { font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.tk-flow-notes-count { margin-left: auto; font-size: 9px; font-weight: 800; color: #fff; background: var(--node-accent, var(--brand)); border-radius: 999px; padding: 1px 6px; line-height: 1.3; }
.tk-flow-notes-text { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.tk-flow-notes-by { font-size: 9px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-flow-meta { display: flex; flex-direction: column; gap: 4px; background: var(--surface-2); border-radius: 9px; padding: 7px 9px; }
.tk-flow-metarow { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--ink-3); min-width: 0; }
.tk-flow-metarow svg { width: 11px; height: 11px; flex: none; opacity: 0.85; }
.tk-flow-metarow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-flow-metarow.wait { color: var(--t-amber, #d97706); font-weight: 600; }
.tk-flow-headright { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tk-flow-zoom { display: flex; align-items: center; gap: 3px; }
.tk-flow-zbtn { width: 24px; height: 24px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 7px; cursor: pointer; color: var(--ink-2); font-size: 13px; font-weight: 700; line-height: 1; display: grid; place-items: center; }
.tk-flow-zbtn:hover { background: var(--surface-2); color: var(--ink); }
.tk-flow-zbtn:disabled { opacity: .4; cursor: default; }
.tk-flow-zbtn:disabled:hover { background: var(--surface); color: var(--ink-2); }
.tk-flow-reset { font-size: 15px; }
.tk-flow-zval { font-size: 11px; font-weight: 700; color: var(--ink-3); min-width: 34px; text-align: center; }
/* Boton del menu del nodo: pildora VISIBLE (borde + fondo + sombra) para que el usuario la ubique
   sin adivinar. Se resalta en hover y en el paso vigente (current). */
.tk-flow-dots { border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; color: var(--ink-2); font-size: 13px; font-weight: 800; padding: 1px 7px; line-height: 1.1; border-radius: 7px; box-shadow: var(--sh-sm); display: inline-flex; align-items: center; }
.tk-flow-dots:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.tk-flow-node.current .tk-flow-dots { background: var(--brand); border-color: var(--brand); color: #fff; }
.tk-flow-badges { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.tk-flow-badge { font-size: 8px; font-weight: 800; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 4px; color: #fff; }
.tk-flow-badge.auto { background: var(--t-blue); }
.tk-flow-badge.done { background: var(--t-green); }
/* Contador de notas del equipo (ADR-0071): cuantos recados hay sobre el nodo. */
.tk-flow-badge.notes { background: var(--brand); font-size: 9px; padding: 1px 6px; letter-spacing: 0; }
/* Version flotante para compuertas/eventos (sin fila de badges): pildora en la esquina del nodo. */
.tk-flow-notecount { position: absolute; top: -6px; right: -6px; z-index: 4; background: var(--brand); color: #fff; font-size: 9px; font-weight: 800; line-height: 1; padding: 2px 5px; border-radius: 8px; box-shadow: var(--sh-sm); pointer-events: none; }
.tk-flow-by { font-size: 9px; color: var(--ink-3); margin-top: 3px; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; }
.tk-flow-menu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 20; width: 220px; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 11px; box-shadow: var(--sh-lg); padding: 11px; text-align: left; }
/* Popover FIJO del menu de nodo (a nivel raiz): no lo recorta el scroller del diagrama ni lo descoloca
   el zoom del canvas. La posicion (left/top) la fija el componente via inline style. */
.tk-flow-menu-fixed { position: fixed; top: auto; left: auto; transform: none; z-index: 3000; width: 230px; }
.tk-flow-menu-backdrop { position: fixed; inset: 0; z-index: 2990; background: transparent; }
.tk-flow-menu-t { font-size: 10.5px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: 7px; }
.tk-flow-menu-note { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.tk-flow-textarea { width: 100%; min-height: 52px; padding: 8px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); font: inherit; font-size: 12px; color: var(--ink); outline: none; resize: vertical; line-height: 1.45; box-sizing: border-box; }
.tk-flow-close { width: 100%; margin-top: 8px; height: 32px; border-radius: 8px; border: none; background: var(--t-green); color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
/* Estado TRABAJANDO de los botones del menu de flujo (cerrar/ruta/reclamar): el click ya se registro y el
   sistema esta procesando. Sin esto el boton solo quedaba deshabilitado (apenas se notaba) y parecia colgado. */
.tk-flow-close:disabled, .tk-flow-route:disabled { cursor: progress; opacity: 0.72; }
.tk-flow-close.is-busy, .tk-flow-route.is-busy { opacity: 1; cursor: progress; }
.tk-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; display: inline-block; animation: tk-spin 0.6s linear infinite; flex: 0 0 auto; }
@keyframes tk-spin { to { transform: rotate(360deg); } }
/* Enlace secundario del menu: "Diligenciar formulario" (paso con formulario, opcional). */
.tk-flow-link { width: 100%; margin-top: 6px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.tk-flow-link:hover { border-color: var(--brand); }
/* Reabrir actividad (ADR-0070): accion reversible, en ambar y contorno para diferenciarla del cierre. */
.tk-flow-reopen { width: 100%; margin-top: 8px; height: 32px; border-radius: 8px; border: 1px solid var(--t-amber, #d97706); background: transparent; color: var(--t-amber, #d97706); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.tk-flow-reopen:hover { background: var(--t-amber-bg, rgba(217,119,6,0.10)); }
/* Notas colaborativas del equipo (ADR-0071): hilo de recados por nodo + caja para agregar. */
.tk-flow-team { border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 2px; }
.tk-flow-notes { display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow-y: auto; margin-bottom: 8px; }
.tk-flow-note-item { background: var(--surface-2); border-radius: 8px; padding: 6px 8px; }
.tk-flow-note-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.tk-flow-note-author { font-size: 11px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-flow-note-date { font-size: 10px; color: var(--ink-3); flex: none; }
.tk-flow-note-text { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.tk-flow-route { width: 100%; margin-bottom: 6px; min-height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; padding: 5px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-flow-route:hover { border-color: var(--brand); }
.tk-flow-route-opt { font-weight: 800; white-space: nowrap; }
.tk-flow-route-to { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-flow-route.approve { border-color: var(--t-green, #16a34a); color: var(--t-green, #16a34a); }
.tk-flow-route.approve:hover { background: var(--t-green-bg, rgba(22,163,74,0.10)); }
.tk-flow-route.reject { border-color: var(--t-rose, #dc2626); color: var(--t-rose, #dc2626); }
.tk-flow-route.reject:hover { background: var(--t-rose-bg, rgba(220,38,38,0.10)); }
.tk-flow-route.approve .tk-flow-route-to, .tk-flow-route.reject .tk-flow-route-to { color: inherit; opacity: 0.85; }
.tk-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.tk-detail-head-main { flex: 1; min-width: 0; }
.tk-detail-number { display: flex; align-items: center; font-size: 12px; font-weight: 800; color: var(--primary); letter-spacing: 0.04em; margin-bottom: 6px; }
.tk-detail-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; cursor: text; line-height: 1.25; }
.tk-detail-title-input { font-size: 1.25rem !important; font-weight: 700; }
.tk-detail-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tk-pill-anchor { position: relative; }
.tk-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--foreground); cursor: pointer; transition: border-color .12s; }
.tk-pill:hover:not(:disabled) { border-color: var(--primary); }
.tk-pill:disabled { cursor: not-allowed; opacity: .75; }
.tk-pill.static { cursor: default; }
.tk-pill.late { border-color: oklch(0.6 0.22 22 / 0.5); color: var(--destructive); }
.tk-pill svg { width: 13px; height: 13px; flex: none; }
.tk-pill .tb-avatar { width: 20px; height: 20px; font-size: 8.5px; margin-left: -4px; }
.tk-pill-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-card); padding: 5px; max-height: 260px; overflow-y: auto; }
.tk-pill-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; padding: 7px 9px; border-radius: 7px; font-size: 12.5px; cursor: pointer; }
.tk-pill-item:hover { background: var(--muted); }
.tk-pill-item.on { background: var(--accent); font-weight: 700; }
.tk-confirm { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--destructive); }

/* Aviso de conflicto de concurrencia */
.tk-conflict { display: flex; align-items: center; gap: 9px; background: oklch(0.78 0.14 70 / 0.15); border: 1px solid oklch(0.78 0.14 70 / 0.5); color: oklch(0.45 0.12 65); border-radius: 10px; padding: 9px 13px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.tk-conflict svg { width: 16px; height: 16px; flex: none; }
.tk-conflict.tk-action-error { background: oklch(0.6 0.22 22 / 0.08); border-color: oklch(0.6 0.22 22 / 0.4); color: var(--destructive); }
/* Prompt de motivo de cierre (opcional) al mover a una columna final. */
.tk-closeask-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 1000; padding: 16px; }
.tk-closeask { width: min(420px, 92%); background: var(--card, var(--surface)); border: 1px solid var(--border, var(--line)); border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.4); padding: 18px 20px; }
.tk-closeask-h { font-size: 15px; font-weight: 800; color: var(--foreground, var(--ink)); }
.tk-closeask-h span { font-weight: 600; color: var(--muted-foreground, var(--ink-3)); font-size: 12.5px; }
.tk-closeask-sub { font-size: 12.5px; color: var(--muted-foreground, var(--ink-2)); margin: 6px 0 14px; }
.tk-closeask-opts { display: flex; flex-direction: column; gap: 7px; }
.tk-closeask-opt { text-align: left; padding: 10px 12px; border: 1px solid var(--border, var(--line-2)); border-radius: 9px; background: var(--surface-2, var(--muted)); font: inherit; font-size: 13px; font-weight: 600; color: var(--foreground, var(--ink)); cursor: pointer; }
.tk-closeask-opt:hover:not(:disabled) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface-2, var(--muted))); }
.tk-closeask-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tk-conflict-x { margin-left: auto; border: none; background: none; font-size: 16px; line-height: 1; color: inherit; cursor: pointer; }

/* Cuerpo 2 columnas del detalle */
/* Cuerpo del detalle en UNA sola columna: los campos del tablero y demas secciones ocupan todo el
   ancho del area de contenido (la columna lateral vacia robaba espacio). El Flujo, cuando existe,
   baja a ancho completo. El Resumen/Bitacora siguen en el rail lateral (contenedor externo). */
.tk-detail-body { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.tk-detail-main, .tk-detail-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tk-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.tk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.tk-card-head h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin: 0; }
.tk-desc-text { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.tk-empty-note { font-size: 12.5px; color: var(--muted-foreground); font-style: italic; margin: 0; }

/* ---- Campos personalizados del tablero (ADR-0065) ---- */
.tk-customfields .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2, var(--muted-foreground)); margin-bottom: 5px; }
.tk-customfields .field { margin-bottom: 4px; }
.tk-fld-help { display: block; font-size: 11.5px; color: var(--ink-3, var(--muted-foreground)); margin-top: 4px; }
.tk-fld-sep { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3, var(--muted-foreground)); border-top: 1px solid var(--line, var(--border)); padding-top: 10px; margin-top: 4px; }
.tk-fld-calc { background: var(--surface-2, var(--accent)); font-weight: 600; }

/* Paginador de la vista Lista (server-side sobre TotalCount/Page/PageSize de ListAsync) */
.tk-pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.tk-pager-info { font-size: 12.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.tk-pager-size { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-foreground); }
.tk-pager-size select { max-width: 80px; }

/* Worklog: cronometro + manual + historial */
.tk-worklog-total { font-size: 12.5px; color: var(--muted-foreground); }
.tk-worklog-total strong { color: var(--foreground); font-variant-numeric: tabular-nums; }
.tk-timer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; border: 1px dashed var(--border); border-radius: 10px; margin-bottom: 10px; }
.tk-timer-display { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.03em; min-width: 108px; }
.tk-timer-note { flex: 1; min-width: 140px; }
.tk-manual { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-manual-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--muted-foreground); margin-right: 2px; }
.tk-manual-num { width: 62px; text-align: center; }
.tk-worklog-list { display: flex; flex-direction: column; gap: 7px; }
.tk-worklog-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 6px 8px; border-radius: 8px; background: var(--muted); }
.tk-worklog-dur { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 62px; }
.tk-worklog-kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--muted-foreground); }
.tk-worklog-note { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); }
.tk-worklog-when { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }

/* Actividad (comentarios + acciones) */
.tk-comment-box { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.tk-comment-box textarea { width: 100%; }
.tk-activity-list { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; overflow-x: hidden; }
.tk-activity-item { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.tk-activity-body { min-width: 0; flex: 1; }
.tk-activity-body { flex: 1; min-width: 0; }
.tk-activity-bubble { background: var(--muted); border-radius: 10px; padding: 8px 11px; }
.tk-activity-bubble p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-activity-action { overflow-wrap: anywhere; }
/* Bitacora enriquecida: barra de comentario (adjuntar/mencionar), chips de adjuntos y preview inline. */
.tk-comment-tools { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tk-comment-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted-foreground); cursor: pointer; font-weight: 700; }
.tk-comment-tool:hover { color: var(--foreground); }
.tk-comment-file { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.tk-comment-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tk-comment-att { display: inline-flex; align-items: center; gap: 5px; max-width: 170px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--muted); font-size: 11.5px; }
.tk-comment-att img { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; }
.tk-comment-att-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-comment-att-x { border: 0; background: transparent; cursor: pointer; color: var(--muted-foreground); font-size: 14px; }
.tk-mention-wrap { position: relative; }
.tk-mention-menu { position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 30; width: 260px; max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--sh-lg); padding: 4px; }
.tk-mention-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; background: transparent; cursor: pointer; border-radius: 7px; font-size: 12.5px; text-align: left; }
.tk-mention-item:hover { background: var(--muted); }
.tk-activity-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tk-activity-img { max-width: 100%; max-height: 180px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; display: block; }
.tk-activity-file { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--foreground); background: var(--muted); }
.tk-activity-meta { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.tk-activity-meta span { color: var(--muted-foreground); font-size: 11px; }
.tk-activity-action { font-size: 12.5px; color: var(--muted-foreground); padding-top: 3px; }
.tk-activity-action strong { color: var(--foreground); }
.tk-activity-action span { font-size: 11px; margin-left: 6px; }

/* Adjuntos */
.tk-attachment { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 6px; font-size: 12.5px; }
.tk-attachment svg { width: 14px; height: 14px; flex: none; color: var(--muted-foreground); }
.tk-attachment-name { font-weight: 600; color: var(--foreground); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-attachment-name:hover { color: var(--primary); text-decoration: underline; }
.tk-attachment-meta { margin-left: auto; font-size: 10.5px; color: var(--muted-foreground); white-space: nowrap; }
.tk-attachment-add { display: flex; gap: 6px; margin-top: 8px; }

/* Encargado inline (lista / cabeceras) */
.tk-assignee { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.tk-assignee .tb-avatar { margin-left: 0; }

/* Tarjetas y detalle de proyecto */
.tk-project-meta { margin-top: 4px; }
.tk-project-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
.tk-project-head { max-width: none; margin-bottom: 18px; }
.tk-project-head-row { display: flex; align-items: flex-start; gap: 26px; flex-wrap: wrap; padding: 16px 18px; }
.tk-project-field { display: flex; flex-direction: column; gap: 5px; }
.tk-project-field .form-control-sm { max-width: 170px; }
.tk-members-panel { border-top: 1px solid var(--border); padding: 14px 18px; }
.tk-members-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.tk-member-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.tk-member-mail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tk-member-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-member-add select { max-width: 280px; }

/* Toasts */
.tk-toasts { position: fixed; bottom: 22px; right: 22px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.tk-toast { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow-card); padding: 11px 15px; font-size: 13px; font-weight: 600; max-width: 380px; animation: tk-toast-in .18s ease-out; }
.tk-toast svg { width: 16px; height: 16px; flex: none; }
.tk-toast.ok { border-color: oklch(0.62 0.16 155 / 0.5); }
.tk-toast.ok svg { color: var(--success); }
.tk-toast.error { border-color: oklch(0.6 0.22 22 / 0.5); }
.tk-toast.error svg { color: var(--destructive); }
@keyframes tk-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* =====================================================================
   PROTOTIPO FINAL ECOREX - tokens EXACTOS del fuente ECOREX.dc.html
   (:root claro + [data-theme=dark], aqui html.dark). Los componentes del
   workspace del tenant (.ws-tenant) consumen estas variables; el area
   PlatformAdmin no lleva la clase y conserva su estilo previo.
   ===================================================================== */
:root {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #FAFAFA; --surface-3: #F2F2F3;
  --ink: #1B1B1E; --ink-2: #5C5C66; --ink-3: #A2A2AC;
  --line: rgba(20,20,25,.07); --line-2: rgba(20,20,25,.12);
  --brand: #1B1B1E; --brand-2: #000000; --brand-soft: #F2F2F1; --on-brand: #FFFFFF; --glow: rgba(0,0,0,.16);
  --t-blue: #2563EB; --t-blue-bg: #E6EFFE; --t-rose: #E11D48; --t-rose-bg: #FEE7EC;
  --t-green: #16A34A; --t-green-bg: #DDF6E6; --t-amber: #C77A06; --t-amber-bg: #FBEFD4;
  --t-violet: #7C3AED; --t-violet-bg: #EEE8FD; --t-slate: #64748B; --t-slate-bg: #EEF1F5;
  --ok: #16A34A; --warn: #C77A06; --danger: #E11D48;
  --glass-blur: 14px; --glass: rgba(255,255,255,.7);
  --sh-sm: 0 1px 2px rgba(20,20,25,.05);
  --sh-md: 0 2px 8px rgba(20,20,25,.06),0 8px 24px rgba(20,20,25,.05);
  --sh-lg: 0 20px 50px -12px rgba(20,20,25,.22);
  --rad: 20px; --pad: 30px;
}
html.dark {
  --bg: #0A0A0B; --surface: #161618; --surface-2: #1C1C1F; --surface-3: #242428;
  --ink: #F4F4F5; --ink-2: #A1A1AA; --ink-3: #6B6B73;
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.12);
  --brand: #F4F4F5; --brand-2: #FFFFFF; --brand-soft: rgba(255,255,255,.09); --on-brand: #161618; --glow: rgba(0,0,0,.4);
  --t-blue: #7FB0FF; --t-blue-bg: rgba(96,149,255,.16); --t-rose: #FF8DA3; --t-rose-bg: rgba(255,88,112,.16);
  --t-green: #5FD897; --t-green-bg: rgba(54,201,140,.16); --t-amber: #F0C46A; --t-amber-bg: rgba(240,174,60,.16);
  --t-violet: #B79CFF; --t-violet-bg: rgba(140,115,255,.16); --t-slate: #9FB0C4; --t-slate-bg: rgba(120,140,160,.16);
  --ok: #36C98C; --warn: #F0AE3C; --danger: #FF7088;
  --glass: rgba(22,22,24,.7);
  --sh-sm: 0 1px 2px rgba(0,0,0,.4); --sh-md: 0 8px 28px rgba(0,0,0,.45); --sh-lg: 0 24px 60px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* --- Workspace del tenant: tipografia Hanken Grotesk (prototipo) + re-mapa
       de las variables legacy hacia los tokens del prototipo. Asi kanban,
       modales, formularios, etc. heredan la paleta exacta sin tocar admin. --- */
.ws-tenant {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --primary: var(--brand);
  --primary-foreground: var(--on-brand);
  --primary-soft: var(--brand-soft);
  --muted: var(--surface-3);
  --muted-foreground: var(--ink-2);
  --accent-foreground: var(--ink);
  --border: var(--line);
  --sidebar: var(--surface);
  --sidebar-border: var(--line);
  --destructive: var(--danger);
  --success: var(--ok);
  --warning: var(--warn);
  --warning-foreground: var(--warn);
  --gold: var(--t-amber);
  --gold-foreground: var(--t-amber);
  --shadow-soft: var(--sh-sm);
  --shadow-card: var(--sh-md);
}
.ws-tenant h1, .ws-tenant h2, .ws-tenant h3 { letter-spacing: -0.01em; }
.ws-tenant a, .ws-tenant .btn-link { color: var(--ink); }

/* Boton primario del workspace = boton negro del prototipo
   (height 44 / radius 13 / brand + on-brand / sombra sh-sm / hover opacity .9) */
.ws-tenant .btn-primary {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  border-radius: 13px; font-weight: 600; font-size: 14px;
  box-shadow: var(--sh-sm);
}
.ws-tenant .btn-primary:hover, .ws-tenant .btn-primary:focus {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand); opacity: .9;
}
.ws-tenant .btn:focus, .ws-tenant .btn:active:focus, .ws-tenant .form-control:focus { box-shadow: 0 0 0 3px var(--glow); }
.ws-tenant .form-control:focus { border-color: var(--ink-3); }

/* =====================================================================
   SHELL (prototipo: grid 68px rail + 272px sidebar + main; topbar 56px)
   ===================================================================== */
.ws-tenant .ecorex-sidebar { width: 272px; }

/* --- Rail de iconos (fuente: 68px, botones 42x42 r12, activo brand/on-brand
       como en el SPA final y las capturas; hover ink + sombra) --- */
.ecorex-rail {
  width: 68px; flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 16px 0;
  position: sticky; top: 0; height: 100vh;
  z-index: 6;
}
.ecorex-rail-top { width: 38px; height: 38px; margin-bottom: 10px; }
.ecorex-rail-btn {
  width: 42px; height: 42px;
  border-radius: 12px; border: none;
  display: grid; place-items: center;
  background: none; color: var(--ink-3); text-decoration: none;
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, color .16s, background .16s;
}
.ecorex-rail-btn svg { width: 19px; height: 19px; }
.ecorex-rail-btn:hover { color: var(--ink); box-shadow: 0 3px 10px -3px rgba(20,20,25,.2); }
.ecorex-rail-btn.active { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.ecorex-rail-spacer { flex: 1; }
.ecorex-rail-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: 12px;
  display: grid; place-items: center;
  margin-top: 6px;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--line-2);
}
@media (max-width: 991.98px) { .ecorex-rail { display: none; } }

/* --- Topbar slim del prototipo: 56px, glass + blur, gap 14 --- */
.ws-tenant .ecorex-topbar {
  height: 56px; gap: 14px; padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.ecorex-topbar-crumb {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 13px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden;
}
.ecorex-topbar-crumb .sep { color: var(--line-2); }
.ecorex-topbar-crumb .cur { color: var(--ink); font-weight: 600; }
.ecorex-bell {
  position: relative;
  width: 36px; height: 36px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
  transition: background .12s, color .12s;
}
.ecorex-bell:hover { background: var(--surface-3); color: var(--ink); }
.ecorex-bell svg { width: 17px; height: 17px; }
.ecorex-bell .dot {
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); border: 1.5px solid var(--surface);
}
/* Wizard de alta (Ola 3) responsive en movil: apilar contenido + resumen, colapsar los grids
   de 2-3 columnas a 1, y llevar el modal a pantalla completa. Los estilos base son inline (no
   tienen flex-direction ni breakpoints), asi que aqui solo se ajusta lo justo para el movil. */
@media (max-width: 700px) {
  .tk-wizard > div { width: 100vw !important; height: 100dvh !important; max-width: 100vw; border-radius: 0 !important; }
  .tk-wz-body { flex-direction: column !important; overflow-y: auto; }
  .tk-wz-aside { width: 100% !important; flex: none; border-top: 1px solid var(--line); }
  .tk-wizard [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* Ola 7: badge con el conteo real de notificaciones sin leer. */
.ecorex-bell .count {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  border: 1.5px solid var(--surface); box-sizing: border-box;
}
.ecorex-bell.active { background: var(--surface-3); color: var(--ink); }

/* Toggle de colapso del sidebar (fuente: 34x34 r9 borde line, icono panel 17px) */
.ecorex-collapse {
  flex: none; width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
  transition: background .12s, color .12s;
}
.ecorex-collapse:hover { background: var(--surface-3); color: var(--ink); }
.ecorex-collapse svg { width: 17px; height: 17px; }

/* Boton Compartir (fuente: h36, r10, borde line-2, 13/600 ink-2, icono 15px).
   Placeholder deshabilitado: mismo look, cursor default. */
.ecorex-share {
  height: 36px; padding: 0 14px; flex: none;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; transition: background .12s, color .12s;
}
.ecorex-share:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.ecorex-share:disabled { cursor: default; opacity: .55; }
.ecorex-share svg { width: 15px; height: 15px; }

/* Colapso del sidebar del workspace (prototipo: columna a 0px + opacity 0,
   transition .2s). Solo escritorio: en movil el sidebar ya es off-canvas. */
@media (min-width: 992px) {
  .ws-tenant .ecorex-sidebar { transition: width .2s, opacity .2s; }
  html.sidebar-collapsed .ws-tenant .ecorex-sidebar {
    width: 0; min-width: 0; opacity: 0;
    border-right: 0; overflow: hidden; pointer-events: none;
  }
}

@media (max-width: 991.98px) { .ecorex-topbar-crumb, .ecorex-collapse, .ecorex-share { display: none; } }

/* =====================================================================
   SIDEBAR del workspace (fuente: header con tile 36 r11 ink, buscador 40px
   surface-2, quick nav 14/600 activo surface-3+ink, labels 10.5 ls .1em)
   ===================================================================== */
.ecorex-ws-head { padding: 16px 16px 12px; border-bottom: 0; }
.ecorex-ws-row {
  display: flex; align-items: center; gap: 11px;
  padding: 8px; border-radius: 13px; cursor: pointer;
}
.ecorex-ws-row:hover { background: var(--surface-3); }
.ecorex-tenant-tile {
  width: 36px; height: 36px; flex: none;
  border-radius: 11px;
  background: var(--ink); color: var(--surface);
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
}
.ecorex-tenant-name { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap; }
.ecorex-tenant-sub { font-size: 11.5px; color: var(--ink-3); }
.ecorex-ws-row .chev { width: 15px; height: 15px; flex: none; color: var(--ink-3); }

.ws-tenant .ecorex-search {
  margin: 0 16px 12px; height: 40px;
  display: flex; align-items: center; gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface-2); color: var(--ink-3);
  font-size: 13.5px;
}
.ws-tenant .ecorex-search:hover { border-color: var(--ink-3); }
.ws-tenant .ecorex-search svg { width: 16px; height: 16px; }
.ws-tenant .ecorex-search input { font-size: 13.5px; color: var(--ink); }
.ws-tenant .ecorex-search input::placeholder { color: var(--ink-3); }
.ws-tenant .ecorex-search .kbd { font-size: 11px; border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; background: none; color: var(--ink-3); }

.ws-tenant .ecorex-nav { padding: 6px 12px 12px; }
.ws-tenant .ecorex-nav-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding: 18px 10px 7px;
}
/* Quick nav del workspace (wsStyle del fuente: 14px/600, r11, margin 2px) */
.ws-tenant .ecorex-nav-link {
  gap: 11px; padding: 9px 10px; border-radius: 11px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 2px;
}
.ws-tenant .ecorex-nav-link svg { width: 17px; height: 17px; opacity: 1; color: var(--ink-2); }
.ws-tenant .ecorex-nav-link:hover { background: var(--surface-3); color: var(--ink); }
.ws-tenant .ecorex-nav-link.active { background: var(--surface-3); color: var(--ink); }
.ws-tenant .ecorex-nav-link.active svg { color: var(--ink); }
.ws-tenant .ecorex-nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--ink); color: var(--surface);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-items: center;
}
.ws-tenant .ecorex-nav-code { font-size: 9.5px; color: var(--ink-3); opacity: .75; letter-spacing: .02em; font-weight: 400; }
.ws-tenant .ecorex-nav-link.active .ecorex-nav-code { color: var(--ink-3); }

/* Pie del sidebar: usuario + boton de tema (fuente: 32x32 r9 line surface) */
.ws-tenant .ecorex-user { padding: 12px; border-top: 1px solid var(--line); gap: 10px; }
.ws-tenant .ecorex-avatar { width: 34px; height: 34px; font-size: 12px; font-weight: 700; color: #fff; background: #5B8DEF; }
.ws-tenant .ecorex-user .nm { font-size: 13.5px; font-weight: 600; line-height: 1.1; }
.ws-tenant .ecorex-user .rl { font-size: 11px; color: var(--ink-3); }
.ecorex-theme-btn {
  margin-left: auto; flex-shrink: 0;
  width: 32px; height: 32px;
  border: 1px solid var(--line, var(--border)); border-radius: 9px;
  background: var(--surface, var(--card)); color: var(--ink-2, var(--muted-foreground));
  display: grid; place-items: center; cursor: pointer;
  transition: background .12s, color .12s;
}
.ecorex-theme-btn:hover { background: var(--surface-3); color: var(--ink); }
.ecorex-theme-btn svg { width: 16px; height: 16px; }

/* Contenido: padding del prototipo (--pad 30px) */
.ws-tenant .ecorex-content { padding: var(--pad); }
@media (max-width: 991.98px) { .ws-tenant .ecorex-content { padding: 16px 14px; } }

/* =====================================================================
   DASHBOARD /inicio (fuente: max 1280, h1 32/800 -.03em, boton 44/13,
   KPI cards r20 p20 sh-sm valor 34/800, paneles 1.65fr/1fr)
   ===================================================================== */
.dash { max-width: 1280px; margin: 0 auto; }
.dash-head { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; }
.dash-today { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-bottom: 6px; }
.dash-title { font-weight: 800; font-size: 32px; letter-spacing: -.03em; line-height: 1.04; margin: 0; }
.dash-sub { color: var(--ink-2); font-size: 14.5px; margin: 8px 0 0; max-width: 560px; }
.dash-sub b { color: var(--ink); font-weight: 700; }
.dash-new {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border-radius: 13px; border: none;
  background: var(--brand); color: var(--on-brand);
  font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; box-shadow: var(--sh-sm);
}
.dash-new:hover { opacity: .9; }
.dash-new svg { width: 17px; height: 17px; }

.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
@media (max-width: 1100px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dash-kpis { grid-template-columns: 1fr; } }
.dash-kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rad); padding: 20px;
  box-shadow: var(--sh-sm); position: relative; overflow: hidden;
  transition: box-shadow .16s;
}
.dash-kpi:hover { box-shadow: var(--sh-md); }
.dash-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.dash-kpi-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
.dash-kpi-ico svg { width: 19px; height: 19px; }
.dash-kpi-ico.tv { background: var(--t-violet-bg); color: var(--t-violet); }
.dash-kpi-ico.tg { background: var(--t-green-bg); color: var(--t-green); }
.dash-kpi-ico.tb { background: var(--t-blue-bg); color: var(--t-blue); }
.dash-kpi-ico.tr { background: var(--t-rose-bg); color: var(--t-rose); }
.dash-kpi-delta { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 8px; white-space: nowrap; }
.dash-kpi-delta.tr { background: var(--t-rose-bg); color: var(--t-rose); }
.dash-kpi-delta.tg { background: var(--t-green-bg); color: var(--t-green); }
.dash-kpi-delta.ta { background: var(--t-amber-bg); color: var(--t-amber); }
.dash-kpi-value { font-weight: 800; font-size: 34px; letter-spacing: -.03em; margin-top: 16px; line-height: 1; }
.dash-kpi-label { font-size: 13px; color: var(--ink-2); margin-top: 3px; }

.dash-panels { display: grid; grid-template-columns: 1.65fr 1fr; gap: 16px; margin-bottom: 30px; }
@media (max-width: 1100px) { .dash-panels { grid-template-columns: 1fr; } }
.dash-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rad); box-shadow: var(--sh-sm); overflow: hidden;
}
.dash-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.dash-card-title { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.dash-card-link { font-size: 13px; font-weight: 600; color: var(--ink-2); background: none; border: none; cursor: pointer; text-decoration: none; }
.dash-card-link:hover { color: var(--ink); }
.dash-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 8px; }
.dash-chip.tr { background: var(--t-rose-bg); color: var(--t-rose); }

.dash-task {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
  cursor: pointer; text-decoration: none; color: inherit;
}
.dash-task:hover { background: var(--surface-2); }
.dash-task:last-child { border-bottom: 0; }
.dash-task-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dash-task-dot.tr { background: var(--t-rose); }
.dash-task-dot.ta { background: var(--t-amber); }
.dash-task-dot.tg { background: var(--t-green); }
.dash-task-main { flex: 1; min-width: 0; }
.dash-task-title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-task-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.dash-prio { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 8px; white-space: nowrap; }
.dash-prio.tr { background: var(--t-rose-bg); color: var(--t-rose); }
.dash-prio.ta { background: var(--t-amber-bg); color: var(--t-amber); }
.dash-prio.tg { background: var(--t-green-bg); color: var(--t-green); }
.dash-task-due { font-size: 12.5px; color: var(--ink-2); width: 58px; text-align: right; white-space: nowrap; }
.dash-task-due.late { color: var(--danger); font-weight: 600; }
.dash-empty { padding: 18px 22px; font-size: 13px; color: var(--ink-3); }

.dash-alert { display: flex; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.dash-alert:last-child { border-bottom: 0; }
.dash-alert-ico { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--t-rose-bg); color: var(--t-rose); }
.dash-alert-ico svg { width: 15px; height: 15px; }
.dash-alert-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-alert-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ===== Seccion "Modulos" del dashboard (fuente: h2 20/800, headers de categoria
   con punto 8x8 r3 y cards 280px r16 p18 con tile 40 r12, pie "Ir al modulo") ===== */
.dash-mods-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.dash-mods-head h2 { font-weight: 800; font-size: 20px; letter-spacing: -.02em; margin: 0; }
.dash-mods-head span { font-size: 13px; color: var(--ink-3); }
.dash-modsec { margin-bottom: 26px; }
.dash-modsec-head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.dash-modsec-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.dash-modsec-dot.tv { background: var(--t-violet); }
.dash-modsec-dot.tb { background: var(--t-blue); }
.dash-modsec-name { font-weight: 700; font-size: 13px; letter-spacing: .03em; }
.dash-modsec-desc { font-size: 12.5px; color: var(--ink-3); }
.dash-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dash-mod {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px; box-shadow: var(--sh-sm);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: transform .16s, box-shadow .16s;
}
.dash-mod:hover { transform: translateY(-2px); box-shadow: var(--sh-md); color: inherit; }
.dash-mod-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dash-mod-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; }
.dash-mod-ico svg { width: 20px; height: 20px; }
.dash-mod-ico.tv { background: var(--t-violet-bg); color: var(--t-violet); }
.dash-mod-ico.tb { background: var(--t-blue-bg); color: var(--t-blue); }
.dash-mod-title { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.dash-mod-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; min-height: 38px; margin: 0; }
.dash-mod-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
}
.dash-mod-go { font-size: 12.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 5px; }
.dash-mod-go svg { width: 14px; height: 14px; }
.dash-mod-code { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Chips y superficies del nucleo de tareas alineadas a tokens del
   prototipo dentro del workspace (prioridad Alta/Media/Baja = rose/amber/
   green; grises fijos del kanban -> surface-2)
   ===================================================================== */
.ws-tenant .tk-priority { border-radius: 8px; font-size: 11px; font-weight: 600; padding: 3px 10px; text-transform: none; letter-spacing: 0; }
.ws-tenant .tk-priority.pr-high { background: var(--t-rose-bg); color: var(--t-rose); }
.ws-tenant .tk-priority.pr-medium { background: var(--t-amber-bg); color: var(--t-amber); }
.ws-tenant .tk-priority.pr-low { background: var(--t-green-bg); color: var(--t-green); }
.ws-tenant .tb-col-head { background: var(--surface-2); }
.ws-tenant .tb-col-body { background: var(--surface-2); }
.ws-tenant .tb-list thead th { background: var(--surface-2); }
.ws-tenant .tb-modal { background: var(--surface); }
.ws-tenant .tk-detail { background: var(--surface); }
.ws-tenant .tk-number { background: var(--surface-3); color: var(--ink-2); }
.ws-tenant .kpi-card { border-radius: var(--rad); box-shadow: var(--sh-sm); }
.ws-tenant .card { box-shadow: var(--sh-sm); }

/* =====================================================================
   MODO OSCURO - ajustes para superficies con grises fijos fuera de tokens
   (solo lo necesario para que kanban/modales del workspace se lean bien)
   ===================================================================== */
html.dark .ws-tenant .tb-modal-side-btn, html.dark .ws-tenant .tb-modal-section-action,
html.dark .ws-tenant .tb-modal-add-btn, html.dark .ws-tenant .tb-desc-empty, html.dark .ws-tenant .tb-modal-tag,
html.dark .ws-tenant .tb-act-item-avatar { background: var(--surface-3); color: var(--ink); }
html.dark .ws-tenant .tb-modal-side-btn:hover, html.dark .ws-tenant .tb-modal-section-action:hover,
html.dark .ws-tenant .tb-modal-add-btn:hover, html.dark .ws-tenant .tb-desc-empty:hover { background: var(--surface-2); }
html.dark .ws-tenant .tb-check-item:hover { background: var(--surface-3); }
html.dark .ws-tenant .tb-check-bar { background: var(--surface-3); }
html.dark .ws-tenant .tb-act-input-foot { background: var(--surface-2); }
html.dark .ws-tenant .tb-tag { background: var(--surface-3); color: var(--ink-2); }
html.dark .ws-tenant .tb-col-drag { background: var(--surface-3); }
html.dark .ws-tenant .tb-status.todo { background: var(--surface-3); color: var(--ink-2); }
html.dark .ws-tenant .tb-status.progress { background: var(--t-blue-bg); color: var(--t-blue); }
html.dark .ws-tenant .tb-status.review { background: var(--t-amber-bg); color: var(--t-amber); }
html.dark .ws-tenant .tb-status.done { background: var(--t-green-bg); color: var(--t-green); }
html.dark .ws-tenant .tk-status.st-pending { background: var(--surface-3); color: var(--ink-2); }
html.dark .ws-tenant .tk-status.st-active { background: var(--t-blue-bg); color: var(--t-blue); }
html.dark .ws-tenant .tk-status.st-progress { background: var(--t-violet-bg); color: var(--t-violet); }
html.dark .ws-tenant .tk-status.st-done { background: var(--t-green-bg); color: var(--t-green); }
html.dark .ws-tenant .tk-status.st-suspended { background: var(--t-amber-bg); color: var(--t-amber); }
html.dark .ws-tenant .tk-status.st-closed { background: var(--surface-3); color: var(--ink-2); }
html.dark .ws-tenant .tk-status.pj-planning { background: var(--surface-3); color: var(--ink-2); }
html.dark .ws-tenant .tk-status.pj-active { background: var(--t-green-bg); color: var(--t-green); }
html.dark .ws-tenant .tk-status.pj-exec { background: var(--t-blue-bg); color: var(--t-blue); }
html.dark .ws-tenant .tk-status.pj-closed { background: var(--surface-3); color: var(--ink-2); }
html.dark .ws-tenant .tb-due.late { background: var(--t-rose-bg); }
html.dark .ws-tenant .form-control, html.dark .ws-tenant .form-control-sm,
html.dark .ws-tenant .tk-filter-select, html.dark .ws-tenant .tb-sort select {
  background: var(--surface-2); color: var(--ink); border-color: var(--line-2);
}
html.dark .ws-tenant .form-control::placeholder { color: var(--ink-3); }
html.dark .ws-tenant .card { background: var(--surface); color: var(--ink); }
html.dark .ws-tenant .table { color: var(--ink); }
html.dark .ws-tenant .badge.bg-secondary { background: var(--surface-3) !important; color: var(--ink-2) !important; }
html.dark .ws-tenant .modal-overlay { background: rgba(0,0,0,.55); }
html.dark .ws-tenant .btn-outline-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }

/* =====================================================================
   TABLEROS DE ACTIVIDADES (ola 2, pantalla 'work' del prototipo
   ECOREX.dc.html). Valores copiados 1:1 del fuente del prototipo:
   tamanos, radios, paddings y tokens (--surface/--ink/--t-*/--sh-*).
   Prefijo ab- (activity boards). Claro/oscuro via tokens de :root.
   ===================================================================== */

@keyframes ab-pop { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes ab-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Indice de tableros ---- */
.ab-page { padding: var(--pad, 30px); position: relative; color: var(--ink); }
.ab-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.ab-eyebrow { font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: .04em; margin-bottom: 5px; }
.ab-title { font-weight: 800; font-size: 28px; letter-spacing: -.03em; margin: 0; }
.ab-subtitle { color: var(--ink-2); font-size: 14px; margin: 6px 0 0; }
.ab-head-actions { display: flex; gap: 8px; align-items: center; }
.ab-btn-primary { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px; border: none; background: var(--brand); color: var(--on-brand); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.ab-btn-primary:hover { opacity: .9; }
.ab-btn-ghost { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.ab-btn-ghost:hover { background: var(--surface-3); color: var(--ink); }

.ab-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.ab-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad, 20px); padding: 18px 20px; box-shadow: var(--sh-sm); display: flex; align-items: center; gap: 14px; }
.ab-kpi-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.ab-kpi-val { font-weight: 800; font-size: 27px; letter-spacing: -.02em; line-height: 1; }
.ab-kpi-lbl { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }

.ab-filterbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; position: relative; z-index: 16; }
.ab-filterbar-lbl { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-right: 2px; }
.ab-dd { position: relative; }
.ab-dd-btn { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; font: inherit; font-size: 12.5px; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); }
.ab-dd-btn:hover { border-color: var(--ink-3); }
.ab-dd-btn.active { border-color: var(--ink); background: var(--surface-3); }
.ab-dd-btn .lbl { color: var(--ink-3); font-weight: 500; }
.ab-dd-btn .val { font-weight: 600; color: var(--ink); }
.ab-dd-pop { position: absolute; top: 40px; left: 0; z-index: 20; min-width: 184px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--sh-lg); padding: 6px; animation: ab-pop .15s ease; max-height: 300px; overflow-y: auto; }
.ab-dd-opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: none; background: none; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); text-align: left; white-space: nowrap; }
.ab-dd-opt:hover { background: var(--surface-3); }
.ab-dd-opt.sel { background: var(--surface-3); font-weight: 600; }
.ab-clear { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; border: none; background: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand); }
.ab-clear:hover { background: var(--surface-3); }
.ab-scrim { position: fixed; inset: 0; z-index: 15; }

.ab-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ab-board-card { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--sh-sm); cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 0; transition: transform .16s, box-shadow .16s, border-color .16s; }
.ab-board-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--line-2); }
/* Los hijos del boton-tarjeta a ancho completo: algunos motores (Chromium de
   Playwright) no estiran los hijos flex de un <button>. */
.ab-board-card > * { width: 100%; }
.ab-bc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ab-bc-code { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.ab-bc-status { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 8px; }
.ab-bc-name { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 6px; }
.ab-bc-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; min-height: 36px; margin: 0; }
.ab-bc-cols { display: flex; align-items: center; gap: 7px; margin: 12px 0 14px; flex-wrap: wrap; }
.ab-bc-cols span { font-size: 11.5px; color: var(--ink-3); }
.ab-bc-progrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; font-size: 12px; color: var(--ink-2); }
.ab-bc-progrow strong { font-weight: 600; color: var(--ink); }
.ab-bc-bar { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; margin-bottom: 14px; }
.ab-bc-bar > i { display: block; height: 100%; border-radius: 6px; background: var(--brand); }
.ab-bc-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 13px; border-top: 1px solid var(--line); }
.ab-avatars { display: flex; align-items: center; padding-left: 7px; }
.ab-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; border: 2px solid var(--surface); margin-left: -7px; flex: none; }
.ab-av.sm { width: 24px; height: 24px; font-size: 9.5px; }
.ab-bc-meta { font-size: 12px; color: var(--ink-3); }
.ab-empty { padding: 40px 0; color: var(--ink-3); font-size: 13.5px; }

/* ---- Detalle del tablero: cabecera ---- */
.ab-dhead { padding: var(--pad, 30px) var(--pad, 30px) 0; color: var(--ink); }
.ab-back { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0; margin-bottom: 14px; }
.ab-back:hover { color: var(--ink); }
.ab-dtitlerow { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.ab-dtitle { font-weight: 800; font-size: 27px; letter-spacing: -.03em; margin: 0; }
.ab-dstatus { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); }
.ab-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ab-ddue { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.ab-dedit { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink-3); }
.ab-dedit:hover { background: var(--surface-3); color: var(--ink); }
.ab-dsub { font-size: 13px; color: var(--ink-3); margin: 0 0 18px; }

.ab-frows { display: grid; grid-template-columns: max-content 1fr; gap: 13px 22px; align-items: center; margin-bottom: 20px; }
.ab-frow-lbl { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.ab-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 20px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.ab-chip:hover { border-color: var(--ink-3); }
.ab-chip.on { padding-left: 10px; font-weight: 600; border-color: var(--ink); background: var(--surface-3); }
.ab-chip-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 9.5px; font-weight: 700; flex: none; }
.ab-tagchip { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 20px; cursor: pointer; border: 1px solid transparent; font-family: inherit; }
.ab-tagchip.on { box-shadow: 0 0 0 2px var(--ink); }
.ab-clear-inline { margin-left: 4px; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--brand); background: none; border: none; cursor: pointer; font-family: inherit; }
.ab-due-input { height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--ink); outline: none; }

.ab-scopes { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); padding: 4px; border-radius: 12px; margin-bottom: 18px; }
.ab-scope { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border: none; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; background: none; color: var(--ink-2); }
.ab-scope.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.ab-scope-n { font-size: 10.5px; font-weight: 700; padding: 0 6px; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3); }
.ab-scope.on .ab-scope-n { background: var(--brand); color: var(--on-brand); }

.ab-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.ab-tab { display: flex; align-items: center; gap: 8px; padding: 10px 14px 14px; border: none; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; margin-bottom: -1px; color: var(--ink-3); border-bottom: 2px solid transparent; }
.ab-tab.on { color: var(--ink); border-bottom: 2px solid var(--ink); }
.ab-tab.disabled { cursor: not-allowed; opacity: .45; }
.ab-tab-add { width: 30px; height: 30px; border-radius: 8px; border: 1px dashed var(--line-2); background: none; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; margin-left: 6px; margin-bottom: 8px; }
.ab-tab-add:hover { border-color: var(--ink-3); color: var(--ink); }
.ab-tabs-right { margin-left: auto; display: flex; gap: 8px; margin-bottom: 8px; position: relative; }
.ab-btn-filter { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); }
.ab-btn-filter:hover { border-color: var(--ink-3); color: var(--ink); }
.ab-btn-filter.active { border-color: var(--ink); color: var(--ink); }
.ab-filter-badge { background: var(--brand); color: var(--on-brand); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; }
.ab-btn-task { height: 34px; padding: 0 14px; border-radius: 9px; border: none; background: var(--brand); color: var(--on-brand); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.ab-btn-task:hover { opacity: .9; }

/* ---- Vista tablero (kanban por columnas del tablero) ---- */
.ab-kanban { padding: 0 var(--pad, 30px) var(--pad, 30px); display: grid; gap: 16px; align-items: start; color: var(--ink); overflow-x: auto; }
.ab-col-head { display: flex; align-items: center; gap: 9px; padding: 2px 4px 14px; }
.ab-col-name { font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.ab-col-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.ab-col-menu { width: 26px; height: 26px; border-radius: 7px; border: none; background: none; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; margin-left: auto; }
.ab-col-menu:hover { background: var(--surface-3); }
.ab-col-body { display: flex; flex-direction: column; gap: 12px; min-height: 60px; border-radius: 14px; max-height: calc(100vh - 330px); overflow-y: auto; overflow-x: hidden; padding: 2px 5px 6px 2px; }
.ab-col-body::-webkit-scrollbar { width: 8px; }
.ab-col-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.ab-col-body::-webkit-scrollbar-track { background: transparent; }
.ab-col-body.dragover { outline: 2px dashed var(--line-2); outline-offset: 4px; background: var(--surface-2); }
.ab-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--sh-sm); cursor: grab; }
.ab-card:hover { box-shadow: var(--sh-md); border-color: var(--line-2); }
.ab-card.dragging { opacity: .5; }
.ab-card-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px; }
.ab-card-title { flex: 1; font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.ab-card-menu { width: 22px; height: 22px; flex: none; border-radius: 6px; border: none; background: none; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.ab-card-menu:hover { background: var(--surface-3); }
.ab-card-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin: 0 0 14px; }
.ab-card-progrow { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-2); margin-bottom: 7px; }
.ab-card-progrow .lbl { display: flex; align-items: center; gap: 6px; }
.ab-card-progrow strong { font-weight: 600; color: var(--ink); }
.ab-card-bar { height: 5px; border-radius: 5px; background: var(--surface-3); overflow: hidden; margin-bottom: 15px; }
.ab-card-bar > i { display: block; height: 100%; border-radius: 5px; }
.ab-card-assign { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.ab-card-assign .lbl { font-size: 12px; color: var(--ink-3); }
.ab-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
.ab-card-due { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.ab-card-counts { display: flex; align-items: center; gap: 13px; color: var(--ink-3); font-size: 11.5px; }
.ab-card-counts span { display: flex; align-items: center; gap: 4px; }
/* Etiqueta clara del tiempo en el estado (columna) de cada tarjeta. El color (texto + borde) lo pone
   el estilo inline segun antiguedad (gris/ambar/rojo) para ver de un vistazo lo estancado. */
.ab-card-statetime { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); font-size: 11px; font-weight: 600; }
.ab-card-statetime svg { width: 13px; height: 13px; flex: none; }
.ab-card-statetime span { opacity: .85; }
.ab-card-statetime strong { font-weight: 800; }
.ab-addtask { width: 100%; padding: 12px; border-radius: 14px; border: 1.5px dashed var(--line-2); background: none; color: var(--ink-3); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; }
.ab-addtask:hover { border-color: var(--ink-3); color: var(--ink); }

/* ---- Vista lista ---- */
.ab-listwrap { padding: 0 var(--pad, 30px) var(--pad, 30px); color: var(--ink); }
.ab-list { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--sh-sm); overflow: hidden; }
.ab-list-head { display: grid; grid-template-columns: 1fr 130px 110px 110px 150px 76px; gap: 12px; padding: 13px 22px; border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 600; color: var(--ink-3); letter-spacing: .05em; }
.ab-list-row { display: grid; grid-template-columns: 1fr 130px 110px 110px 150px 76px; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); align-items: center; cursor: pointer; }
.ab-list-row:hover { background: var(--surface-2); }
.ab-list-row:last-child { border-bottom: none; }
.ab-lr-title { min-width: 0; }
.ab-lr-title > div:first-child { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-lr-title > div:last-child { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ab-lr-status { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.ab-lr-prog { display: flex; align-items: center; gap: 9px; }
.ab-lr-prog .bar { flex: 1; height: 5px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.ab-lr-prog .bar > i { display: block; height: 100%; border-radius: 5px; }
.ab-lr-prog .pct { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.ab-lr-due { text-align: right; font-size: 12.5px; font-weight: 500; }
.ab-prio { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 8px; }

/* ---- Vista Lista configurable por tablero (Ola 2 ADR-0065) ---- */
.tkl-scroll { border: 1px solid var(--line); border-radius: var(--rad, 20px); background: var(--surface); box-shadow: var(--sh-sm); overflow: auto; max-height: calc(100vh - 320px); }
/* Barra de scroll horizontal SUPERIOR (bajo los titulos), sincronizada con la inferior por JS. */
.tkl-topscroll { overflow-x: auto; overflow-y: hidden; height: 12px; margin-bottom: 4px; }
.tkl-topscroll-inner { height: 1px; }
.tkl-topscroll::-webkit-scrollbar { height: 10px; }
.tkl-topscroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.tkl-topscroll::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 8px; }
/* Paginador de la Lista. */
.tkl-pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 0; }
.tkl-pager-info { font-size: 12px; color: var(--ink-3); }
.tkl-pager-btns { display: flex; gap: 5px; }
.tkl-pager-btn { min-width: 32px; height: 30px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; cursor: pointer; color: var(--ink-2); font-size: 15px; line-height: 1; }
.tkl-pager-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-2); }
.tkl-pager-btn:disabled { opacity: .4; cursor: default; }
/* Subtareas (tareas hijas, ADR-0065): indicador en la tarjeta + filas en el detalle. */
.ab-subtask-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: var(--brand, #6d5efc); background: color-mix(in srgb, var(--brand, #6d5efc) 13%, transparent); padding: 1px 7px; border-radius: 999px; white-space: nowrap; flex: none; }
.tk-subtask-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; background: var(--surface); }
.tk-subtask-row:hover { background: var(--surface-2); border-color: var(--line-2); }
.tk-subtask-num { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tk-subtask-title { font-size: 13px; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; color: var(--ink); }
.tkl thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); text-align: left; padding: 10px 16px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tkl thead th.tkl-pin { left: 0; z-index: 4; }
.tkl-th-s { font-size: 9.5px; font-weight: 500; color: var(--ink-3); text-transform: none; letter-spacing: 0; margin-top: 2px; opacity: .85; }
.tkl tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.tkl tbody tr:last-child td { border-bottom: none; }
.tkl-row { cursor: pointer; }
.tkl-row:hover td { background: var(--surface-2); }
.tkl td.tkl-pin { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 220px; max-width: 360px; box-shadow: 1px 0 0 var(--line); }
.tkl-row:hover td.tkl-pin { background: var(--surface-2); }
.tkl th.tkl-pin { background: var(--surface-2); box-shadow: 1px 0 0 var(--line); }
.tkl-mono { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 12px; }
/* Bordes de columna visibles (rejilla), como en la hoja de Excel. */
.tkl thead th, .tkl tbody td { border-right: 1px solid var(--line); }
.tkl thead th:last-child, .tkl tbody td:last-child { border-right: none; }
/* Ancho configurable por tablero: cuando alguna columna trae ancho, la tabla pasa a layout fijo y
   las celdas recortan con elipsis (asi se pueden angostar columnas mas alla del contenido). */
.tkl-fixed { table-layout: fixed; }
.tkl-fixed thead th, .tkl-fixed tbody td { overflow: hidden; text-overflow: ellipsis; }
.tkl-fixed td.tkl-pin, .tkl-fixed th.tkl-pin { min-width: 0; max-width: none; }
/* Tirador para arrastrar el borde derecho del encabezado y redimensionar la columna. */
.tkl thead th { position: sticky; } /* asegura contexto posicionado para el tirador absoluto */
.tkl-resizer { position: absolute; top: 0; right: -3px; width: 12px; height: 100%; cursor: col-resize; user-select: none; touch-action: none; z-index: 8; }
.tkl-resizer:hover { background: color-mix(in srgb, var(--brand, #7c5cff) 45%, transparent); }
/* En layout fijo el th recorta con overflow:hidden; el tirador debe poder sobresalir para agarrarse. */
.tkl-fixed thead th { overflow: visible; }
.tkl-fixed tbody td { overflow: hidden; text-overflow: ellipsis; }
.lc-width { width: 74px; text-align: right; }
.tkl-cf { color: var(--ink-2); }
.tkl-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tkl-tag { font-size: 10.5px; padding: 1px 8px; border-radius: 999px; }
.tkl-empty { padding: 24px 22px; color: var(--ink-3); text-align: center; }
/* Agrupador de la Lista: barra + selector, encabezado de grupo con sumas, total general, arbol de subtareas. */
.tkl-groupbar { display: flex; align-items: center; gap: 10px; padding: 2px 2px 12px; flex-wrap: wrap; }
.tkl-groupbar-lbl { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.tkl-groupbar-sep { display: inline-block; width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.tkl-groupsel { height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: var(--surface); color: var(--ink); font-size: 13px; cursor: pointer; }
.tkl-groupbar-hint { font-size: 11.5px; color: var(--ink-3); }
.tkl-grouprow > td { background: color-mix(in srgb, var(--brand, #7c5cff) 10%, var(--surface-2)); border-top: 2px solid var(--line); border-bottom: 1px solid var(--line); padding: 9px 16px; font-size: 12.5px; }
.tkl-grouprow > td.tkl-pin { background: color-mix(in srgb, var(--brand, #7c5cff) 10%, var(--surface-2)); }
.tkl-group-label { font-weight: 700; color: var(--ink); }
.tkl-group-count { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.tkl-sum { color: var(--ink); font-variant-numeric: tabular-nums; }
.tkl-totalrow > td { background: var(--surface-2); border-top: 2px solid var(--line-2, var(--line)); padding: 12px 16px; font-size: 13px; }
.tkl-totalrow > td.tkl-pin { background: var(--surface-2); }
.tkl-expander { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--ink-2); font-weight: 700; font-size: 13px; line-height: 1; cursor: pointer; vertical-align: middle; }
.tkl-expander:hover { background: var(--surface-3); border-color: var(--line-2, var(--line)); }
.tkl-childrow > td { background: var(--surface-2); }
.tkl-childrow > td.tkl-pin { background: var(--surface-2); }
/* Detalle expandible (GridDetail): items de la cotizacion bajo la fila padre. */
.tkl-detailhead > td, .tkl-detailrow > td { background: var(--surface-2); padding: 3px 16px; }
.tkl-detailhead > td.tkl-pin, .tkl-detailrow > td.tkl-pin { background: var(--surface-2); }
.tkl-detailhead > td { padding-top: 8px; padding-bottom: 2px; }
.tkl-detailrow:last-child > td { padding-bottom: 9px; }
.tkl-dgrid { display: grid; gap: 6px 14px; align-items: center; padding-left: 24px; }
.tkl-dgrid > span { font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkl-dgrid-head > span { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
/* Supra-titulo (grupo) que abarca varias columnas: fila superior de la cabecera. */
.tkl-group { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); background: var(--surface-3); border-bottom: 1px solid var(--line); }
/* Fila de subtitulos: fusiona consecutivos con el mismo subtitulo; estilo mas tenue. */
.tkl-subrow { text-align: left; font-size: 9.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line); }
/* Cabecera MULTINIVEL (Grupo / Titulo / Subtitulo): cada fila (~30px) se fija bajo la anterior. */
.tkl thead tr:nth-child(2) th { top: 30px; }
.tkl thead tr:nth-child(3) th { top: 60px; }
.tkl .ab-lr-title > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.tkl .ab-lr-title > div:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.tkl .ab-lr-prog { min-width: 130px; }
.tkl .ab-lr-due { text-align: left; }

/* Configurador de columnas */
.tkl-cfg-hint { font-size: 12px; color: var(--ink-3); margin: 0 0 14px; line-height: 1.5; }
.lc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink); }
.lc-tbl th { text-align: left; font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.lc-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lc-tbl tr.lc-off { opacity: .5; }
.lc-move { display: flex; flex-direction: column; gap: 3px; }
.lc-move button { border: 1px solid var(--line); background: var(--surface-2); border-radius: 5px; width: 24px; height: 15px; line-height: 1; cursor: pointer; font-size: 8px; color: var(--ink-2); padding: 0; }
.lc-move button:disabled { opacity: .3; cursor: default; }
.lc-name { font-weight: 600; }
.lc-badge { font-size: 9px; background: var(--surface-3); color: var(--ink-3); padding: 1px 6px; border-radius: 999px; margin-left: 6px; text-transform: uppercase; letter-spacing: .03em; }
.lc-color { display: flex; align-items: center; gap: 6px; }
.lc-color input[type=color] { width: 34px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; padding: 2px; }
.lc-clear { border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 16px; line-height: 1; }
.lc-tbl .ab-input { width: 100%; min-width: 90px; }
.lc-addform { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; background: var(--surface-2); }
.lc-addform-top { display: flex; align-items: center; gap: 10px; }
.lc-addform-top label { font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.lc-addform-top .ab-select { max-width: 320px; }
.lc-fieldpick { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0; max-height: 180px; overflow: auto; }
.lc-fieldchk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.lc-fieldchk input { cursor: pointer; }

/* ---- Modales de tablero / tarea rapida ---- */
.ab-modal-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(15,15,18,.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: ab-fade .15s ease; }
.ab-modal { width: min(480px, 94vw); max-height: 92vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--sh-lg); animation: ab-pop .2s ease; color: var(--ink); }
.ab-modal.wide { width: min(560px, 94vw); }
.ab-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.ab-modal-head h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.ab-modal-x { width: 32px; height: 32px; border-radius: 9px; border: none; background: none; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; font-size: 18px; }
.ab-modal-x:hover { background: var(--surface-3); color: var(--ink); }
.ab-modal-body { padding: 16px 22px; display: flex; flex-direction: column; gap: 13px; }
.ab-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px 20px; }
.ab-field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.ab-input, .ab-select, .ab-textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); font: inherit; font-size: 13.5px; color: var(--ink); outline: none; }
.ab-input:focus, .ab-select:focus, .ab-textarea:focus { border-color: var(--ink-3); }
.ab-textarea { min-height: 70px; resize: vertical; }
.ab-prio-opts { display: flex; gap: 7px; }
.ab-prio-opt { padding: 6px 13px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ab-prio-opt.on { border-color: var(--ink); background: var(--surface-3); color: var(--ink); }
.ab-tag-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.ab-btn-secondary { height: 40px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.ab-btn-secondary:hover { background: var(--surface-3); }
.ab-btn-commit { height: 40px; padding: 0 20px; border-radius: 11px; border: none; background: var(--brand); color: var(--on-brand); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.ab-btn-commit:hover { opacity: .9; }
.ab-btn-commit:disabled { opacity: .5; cursor: not-allowed; }
.ab-field-error { font-size: 12px; color: var(--danger); }
.ab-check-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ab-check-lbl input { width: 15px; height: 15px; }

/* ---- Configurador de campos personalizados del tablero (ADR-0065) ---- */
.ab-fields-modal { width: min(680px, 96vw); }
.ab-fld-help { font-size: 12px; color: var(--ink-3); margin: 0; }
.ab-fld-help a { color: var(--brand); }
.ab-fld-ok { font-size: 12px; color: var(--success, #2e7d32); }
.ab-cfg-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ab-cfg-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface-2); }
.ab-cfg-form { margin-top: 6px; padding: 14px; border: 1px dashed var(--line-2); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; }
.ab-section-title { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ab-field-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ab-field-row > .ab-field { flex: 1 1 220px; min-width: 0; }
.ab-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ab-mono.is-invalid { border-color: var(--danger); }
.ab-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ab-key { padding: 3px 9px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.ab-key:hover { border-color: var(--ink-3); color: var(--ink); }

/* ---- Menus "..." de columna/tarjeta (ola 3, estilo ab-dd del fuente) ---- */
.ab-menu-anchor { position: relative; z-index: 16; }
.ab-menu-pop { top: calc(100% + 6px); right: 0; left: auto; min-width: 200px; }
.ab-menu-sub { padding-left: 22px; justify-content: flex-start; gap: 8px; font-size: 12.5px; }
.ab-menu-sub .ab-dot { flex: none; }
.ab-dd-opt.danger { color: var(--danger); }

/* ---- Vista CALENDARIO del tablero (ola 3, bloque isCalendario del fuente) ---- */
.ab-calwrap { padding: 0 var(--pad, 30px) var(--pad, 30px); color: var(--ink); }
.ab-cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad, 20px); box-shadow: var(--sh-sm); overflow: hidden; }
.ab-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ab-cal-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ab-cal-nav { display: flex; gap: 6px; }
.ab-cal-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.ab-cal-btn:hover { background: var(--surface-3); }
.ab-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 14px 16px 4px; }
.ab-cal-week > div { font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: center; padding-bottom: 4px; }
.ab-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 16px 16px; }
.ab-cal-cell { min-height: 92px; border-radius: 10px; padding: 7px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.ab-cal-cell.today { border-color: var(--brand); background: var(--brand-soft); }
.ab-cal-cell.off { border-color: transparent; background: transparent; cursor: default; }
.ab-cal-num { font-size: 12px; font-weight: 600; color: var(--ink-2); padding-left: 2px; }
.ab-cal-num.today { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; padding-left: 0; }
.ab-cal-chip { font-size: 10px; font-weight: 600; padding: 3px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--surface-3); color: var(--ink-2); cursor: pointer; }
.ab-cal-chip:hover { color: var(--ink); }
.ab-cal-more { font-size: 10px; font-weight: 700; color: var(--ink-3); padding-left: 2px; }

/* ---- Vista GANTT del tablero (ola 3, bloque isGantt del fuente) ---- */
.ab-ganttwrap { padding: 0 var(--pad, 30px) var(--pad, 30px); color: var(--ink); }
.ab-gantt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad, 20px); box-shadow: var(--sh-sm); overflow: hidden; }
.ab-gantt-head { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ab-gantt-lbl { width: 220px; flex: none; padding: 12px 16px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); letter-spacing: .05em; display: flex; align-items: center; }
.ab-gantt-days { flex: 1; display: grid; grid-template-columns: repeat(14, 1fr); }
.ab-gantt-day { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 11px 0; border-left: 1px solid var(--line); }
.ab-gantt-day.we { background: var(--surface-3); }
.ab-gantt-nav { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-left: 1px solid var(--line); }
.ab-gantt-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.ab-gantt-task { width: 220px; flex: none; padding: 0 16px; display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.ab-gantt-task:hover .ab-gantt-name { color: var(--ink); }
.ab-gantt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ab-gantt-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-gantt-track { flex: 1; position: relative; height: 38px; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / 14) 100%; }
.ab-gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--brand); opacity: .45; }
.ab-gantt-bar { position: absolute; top: 8px; height: 22px; border-radius: 7px; display: flex; align-items: center; padding: 0 9px; color: #fff; font-size: 10.5px; font-weight: 700; overflow: hidden; white-space: nowrap; box-shadow: var(--sh-sm); cursor: pointer; }

/* ---- Detalle de tarea: checklist / asignados / mover a ---- */
.tk-check-row { display: flex; align-items: center; gap: 10px; }
.tk-check-box { width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center; cursor: pointer; border: 1.5px solid var(--line-2); background: var(--surface, var(--card)); padding: 0; }
.tk-check-box.done { border-color: var(--t-green, #16A34A); background: var(--t-green, #16A34A); }
.tk-check-txt { font-size: 13px; flex: 1; min-width: 0; }
.tk-check-txt.done { color: var(--ink-3, var(--muted-foreground)); text-decoration: line-through; }
.tk-check-del { width: 20px; height: 20px; flex: none; border: none; background: none; color: var(--ink-3, var(--muted-foreground)); cursor: pointer; border-radius: 6px; display: grid; place-items: center; opacity: 0; }
.tk-check-row:hover .tk-check-del { opacity: 1; }
.tk-check-del:hover { background: var(--t-rose-bg, #FEE7EC); color: var(--danger, #E11D48); }
.tk-check-add { display: flex; gap: 7px; margin-top: 4px; }
.tk-check-add input { flex: 1; }
.tk-progress-bar { height: 6px; border-radius: 5px; background: var(--surface-3, var(--muted)); overflow: hidden; }
.tk-progress-bar > i { display: block; height: 100%; border-radius: 5px; }
.tk-assignee-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.tk-assignee-row .name { flex: 1; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-assignee-x { width: 22px; height: 22px; border: none; background: none; color: var(--ink-3, var(--muted-foreground)); cursor: pointer; border-radius: 6px; display: grid; place-items: center; }
.tk-assignee-x:hover { background: var(--t-rose-bg, #FEE7EC); color: var(--danger, #E11D48); }
.tk-av-solid { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; flex: none; }
.tk-dashed-add { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; padding: 8px; border-radius: 9px; border: 1.5px dashed var(--line-2, var(--border)); background: none; color: var(--ink-3, var(--muted-foreground)); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; width: 100%; }
.tk-dashed-add:hover { border-color: var(--brand, var(--primary)); color: var(--brand, var(--primary)); }

/* Campo geografico (FormControlType.Geografia): 3 selects encadenados Pais/Depto/Ciudad. */
.dfr-geo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dfr-geo-col { display: flex; flex-direction: column; gap: 4px; }
.dfr-geo-lbl { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.dfr-geo-sel { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; }
.dfr-geo-sel:disabled { background: var(--surface-2); color: var(--ink-3); }
@media (max-width: 620px) { .dfr-geo { grid-template-columns: 1fr; } }

/* #5 Colores de grupo en el configurador de columnas. */
.tkl-grpcolors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.tkl-grpcolors-lbl { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.tkl-grpchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); }
.tkl-grpchip input[type=color] { width: 26px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: none; cursor: pointer; }

/* Directorio General: gestion de fichas (pildoras) configurables. */
.dg-cfg-fnew { border-style: dashed !important; font-weight: 600; }
.dg-ficha-edit, .dg-ficha-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.dg-cfg-input { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.dg-ficha-color { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.dg-ficha-cancel { font-size: 16px; line-height: 1; }
.dg-ficha-del { color: var(--danger, #dc2626); border-color: color-mix(in srgb, var(--danger, #dc2626) 40%, var(--line)); }
.dg-ficha-err { color: var(--danger, #dc2626); font-size: 12.5px; }

/* ---- Pildora-ficha con engranaje de configuracion (config por ficha) ---- */
.dg-fchip { display: inline-flex; align-items: stretch; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; }
.dg-fchip:hover { border-color: var(--ink-3); }
.dg-fchip.active { border-color: var(--brand); background: var(--brand); }
.dg-fchip.active .dg-fchip-lbl { color: var(--on-brand); }
.dg-fchip.active .dg-fchip-gear { color: var(--on-brand); border-left-color: color-mix(in srgb, var(--on-brand) 30%, transparent); }
.dg-fchip.is-hidden { opacity: .6; }
.dg-fchip-lbl { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: none; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dg-fchip-lbl:disabled { cursor: not-allowed; }
.dg-fchip-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); background: var(--surface-3); border-radius: 5px; padding: 1px 5px; }
.dg-fchip.active .dg-fchip-tag { color: var(--on-brand); background: color-mix(in srgb, var(--on-brand) 22%, transparent); }
.dg-fchip-gear { width: 30px; border: none; border-left: 1px solid var(--line); background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.dg-fchip-gear:hover:not(:disabled) { background: var(--surface-3); color: var(--brand); }
.dg-fchip-gear:disabled { opacity: .4; cursor: not-allowed; }
.dg-fchip-gear svg { width: 14px; height: 14px; }

/* ---- Modalcito de configuracion de una ficha ---- */
.dg-fm-ov { position: fixed; inset: 0; z-index: 2600; background: rgba(15,23,42,.42); display: grid; place-items: center; padding: 20px; }
.dg-fm { width: min(400px, 94vw); background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--sh-lg, 0 20px 50px rgba(0,0,0,.25)); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.dg-fm-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.dg-fm-x { border: none; background: transparent; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer; }
.dg-fm-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-top: 4px; }
.dg-fm .dg-cfg-input { width: 100%; box-sizing: border-box; }
.dg-fm-2 { display: flex; gap: 12px; align-items: flex-end; }
.dg-fm-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-top: 8px; cursor: pointer; }
.dg-fm-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

/* Adjuntos de tarea: zona drag & drop (modal de detalle y wizard). */
.tk-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px 16px; border: 2px dashed var(--line); border-radius: 12px; background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.tk-drop.over { border-color: var(--brand, #7c5cff); background: color-mix(in srgb, var(--brand, #7c5cff) 8%, var(--surface-2)); }
.tk-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tk-drop-ic { width: 26px; height: 26px; color: var(--ink-3); }
.tk-drop-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tk-drop-hint { font-size: 11.5px; color: var(--ink-3); }
.tk-att-url { margin-top: 8px; }
.tk-att-url > summary { font-size: 12px; color: var(--ink-3); cursor: pointer; }
.tk-att-url > summary:hover { color: var(--ink); }

/* Wizard: lista de archivos elegidos antes de crear la actividad. */
.tk-wizfiles { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tk-wizfiles li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 12.5px; }
.tk-wizfiles li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.tk-wizfiles li button { border: none; background: none; color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer; }
.tk-wizfiles li button:hover { color: var(--danger, #dc2626); }
/* Galeria de previsualizacion de adjuntos del wizard (#5): miniatura para imagenes, insignia para archivos. */
.tk-gallery { margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.tk-gcard { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.tk-gthumb { aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--surface-2); overflow: hidden; }
.tk-gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-gbadge { font-size: 12px; font-weight: 800; letter-spacing: .5px; color: var(--ink-2); padding: 6px 10px; border: 1.5px solid var(--line-2); border-radius: 8px; background: var(--surface); }
.tk-gname { font-size: 11.5px; color: var(--ink); padding: 6px 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-gsize { font-size: 10.5px; color: var(--ink-3); padding: 1px 8px 7px; }
.tk-gremove { position: absolute; top: 5px; right: 5px; z-index: 2; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.tk-gremove:hover:not(:disabled) { background: var(--danger, #dc2626); }
.tk-gremove:disabled { opacity: .5; cursor: default; }

/* Cargador de contactos: modal de configurar busquedas. */
.cs-editor { display: flex; flex-direction: column; gap: 12px; }
.cs-editor label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2, var(--ink)); }
.cs-editor .form-control { font-weight: 400; }
.cs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.cs-check { flex-direction: row !important; align-items: center; gap: 8px !important; }
.cs-editor-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cs-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; color: var(--ink-3); letter-spacing: .04em; }
.cs-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink); }
.cs-table tr.cs-off td { opacity: .5; }
.cs-actions { display: flex; gap: 6px; justify-content: flex-end; }
.cs-empty { text-align: center; color: var(--ink-3); padding: 20px 0 !important; }
.cs-note { font-size: 12px; color: var(--ink-3); max-width: 720px; }
.cs-note-err { color: var(--danger, #dc2626); font-weight: 600; }

/* ---- Configurar busquedas: version GLOBAL de cl-btn/cl-flash (el scoped vive en CargadorContactos,
   este componente se usa desde el Gestor de contactos y no hereda ese scope) ---- */
.cs-editor .cl-btn, .cs-grid .cl-btn, .cs-editor + .cl-flash, .modal-body .cl-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 1px solid var(--line-2);
    border-radius: 6px; background: var(--surface); color: var(--ink);
    font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.modal-body .cl-btn:hover:not(:disabled) { background: var(--surface-3); }
.modal-body .cl-btn:disabled { opacity: .55; cursor: default; }
.modal-body .cl-btn.primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.modal-body .cl-btn.sm { padding: 4px 8px; font-size: 11.5px; }
.modal-body .cl-btn.danger { color: var(--danger); border-color: var(--line-2); font-weight: 700; }
.modal-body .cl-btn.danger:hover:not(:disabled) { background: var(--t-rose-bg); border-color: var(--danger); }
.modal-body .cl-flash {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 8px;
    background: var(--surface); font-size: 12.5px;
}
.modal-body .cl-flash.ok { border-color: var(--ok); color: var(--ok); background: var(--t-green-bg); }
.modal-body .cl-flash.err { border-color: var(--danger); color: var(--danger); background: var(--t-rose-bg); }

/* ---- Grilla de busquedas con edicion en linea ---- */
.cs-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cs-grid th { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 10.5px; text-transform: uppercase; color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; }
.cs-grid td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.cs-grid tr.cs-off > td { opacity: .55; }
.cs-grid tr.cs-draft > td { background: var(--surface-2, var(--surface)); }
.cs-grid tr.cs-detail > td { background: var(--surface-2, var(--surface)); padding: 12px 14px; }
.cs-in { width: 100%; box-sizing: border-box; padding: 5px 7px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-family: inherit; }
.cs-in:focus { outline: none; border-color: var(--brand); }
.cs-num { text-align: right; }
/* Bloque de enriquecimiento (Maps->LinkedIn / web-correo): cada opcion en una fila compacta
   [checkbox] [etiqueta] y, indentado, [sub-label] [input numerico CHICO] en linea. Antes el input
   heredaba width:100% y ocupaba todo el modal para un valor de 1-2 digitos. Se scopea bajo .cs-editor
   y se fuerza flex-direction:row para GANARLE a ".cs-editor label" (que apila texto sobre input). */
.cs-editor .cs-enrich { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.cs-editor .cs-enrich + .cs-enrich { margin-top: 2px; }
.cs-editor .cs-enrich-chk { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.35; cursor: pointer; margin: 0; }
.cs-editor .cs-enrich-chk input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--brand); cursor: pointer; }
.cs-editor .cs-enrich-max { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0 0 0 26px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.cs-editor .cs-enrich .cs-num { width: 76px; flex: 0 0 auto; }
.cs-c-exp { text-align: center; }
.cs-exp { border: none; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; }
.cs-c-chk { text-align: center; }
.cs-detail-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.cs-sched { border: 1px dashed var(--line-2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2, var(--surface)); }
.cs-sched-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.cs-sched-cap { font-size: 10px; color: var(--ink-3); margin-top: 3px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-sched-btn { text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-sched-btn:hover { border-color: var(--brand); }
.cs-slot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.cs-slot .form-control { max-width: 150px; }
.cs-slot-sum { font-size: 11.5px; color: var(--ink-3); margin-left: auto; }

/* ============================================================================
   AUDITORIA MOVIL (#9) - responsividad transversal
   Las cabeceras de KPIs/estadisticas de cada modulo usan columnas fijas
   (repeat(4|5|6, 1fr)) que desbordan y provocan scroll horizontal en celular.
   Se colapsan a 2 columnas en tablet y 1 en movil. Se usa !important porque el
   CSS scoped de cada pagina (.x-kpis[b-hash]) gana en especificidad al global.
   ============================================================================ */
@media (max-width: 900px) {
    .ab-kpis, .fx-kpis, .dash-kpis, .fl-kpis, .cn-kpis, .rg-kpis, .xd-kpis,
    .cl-kpis, .dg-kpis, .gc-kpis, .fm-kpis, .mc-kpis, .rpt-kpis, .pa-kpis,
    .ae-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 560px) {
    .ab-kpis, .fx-kpis, .dash-kpis, .fl-kpis, .cn-kpis, .rg-kpis, .xd-kpis,
    .cl-kpis, .dg-kpis, .gc-kpis, .fm-kpis, .mc-kpis, .rpt-kpis, .pa-kpis,
    .ae-kpi-grid {
        grid-template-columns: 1fr !important;
    }
}
/* Barra de herramientas del tablero (#9): las pildoras de alcance, las pestanas de vista y sus
   acciones a la derecha desbordaban en celular. En pantallas angostas se ajustan por lineas. */
@media (max-width: 640px) {
    .ab-scopes { flex-wrap: wrap; }
    .ab-tabs { flex-wrap: wrap; row-gap: 4px; }
    .ab-tabs-right { margin-left: 0; margin-top: 8px; width: 100%; flex-wrap: wrap; }
    /* Kanban en celular: la rejilla `repeat(N, minmax(0,1fr))` (inline) apinaba N columnas en 375px
       hasta volverlas ilegibles. Se sustituye por columnas de ancho fijo (~82vw) que fluyen en una
       fila con scroll horizontal y "snap", para leer una columna a la vez y deslizar a la siguiente. */
    .ab-kanban {
        padding-left: 12px; padding-right: 12px;
        grid-template-columns: none !important;
        grid-auto-flow: column;
        grid-auto-columns: 82vw;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .ab-kanban > * { scroll-snap-align: start; }
    /* La columna interna ya no necesita limitar su alto contra el viewport del escritorio. */
    .ab-col-body { max-height: none; }
}