/* ───────────────────────────────────────────────────────────────────────────
   GCan — estilo visual FROST (portado de ClasCon: header + navbar + botones).
   GCan es siempre "frost", así que las reglas se aplican directas a las clases.
   Filas IGUAL que ClasCon: principal min-height 64 + navegación height 52. ClasCon/GRP usan
   Tailwind (reset global box-sizing:border-box) → el padding va DENTRO → alto total = 116px.
   GCan replica ese box model SOLO en el header (.tc-platform-header *) para calcar los 116px.
   Los paneles usan --tc-header-h (medida en runtime) para quedar a ras.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --tc-brand-blue: rgb(0 87 184);
  --frost-header-blur: 20px;
  --frost-bg-warmth: 1;     /* multiplicador de la calidez del fondo (0 = neutro) */
  --frost-bg-image: none;   /* imagen de fondo opcional (data URL) */
  --frost-bg-blur: 0px;     /* desenfoque de la imagen de fondo */
  --frost-bg-tint: 0;       /* opacidad del velo de color sobre la imagen (0-1) */
  --frost-bg-tint-rgb: 238 242 248; /* color del velo de la imagen */
  --frost-bg-veil: 0.9;     /* opacidad del velo blanco base de body::after (0 cuando hay imagen de fondo) */
  --frost-card-opacity: 0.72; /* opacidad del cristal de tarjetas/tablas/fichas (intensidad, ajustable) */
  --frost-surface-blur: 16px; /* desenfoque del cristal de superficies */
  --frost-modal-blur: 20px;   /* desenfoque del cristal de ventanas/modales/popovers */
  --frost-icon-opacity: 0.92; /* opacidad de los iconos (canónico, compartido) */
  --tc-header-h: 116px;     /* altura REAL del header (se mide en runtime; 116 = main 64 + nav 52 con box-sizing:border-box, IGUAL que ClasCon/GRP que usan Tailwind); paneles y contenido la usan para quedar a ras */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Fondo cálido FROST tras el contenido (capa fija) para que el cristal "lea". */
body { background-color: #eef2f8; }

/* Cristal FROST reutilizable: añadir className "tc-frost-surface" / "tc-frost-modal" a superficies
   con fondo opaco inline (tablas, KPIs, mapas, desplegables, fichas, modales). El !important vence
   al background:"white" inline sin tener que tocarlo en cada componente. */
.tc-frost-surface { background: rgba(255,255,255, var(--frost-card-opacity, 0.72)) !important; backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.2); -webkit-backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.2); }
.tc-frost-modal { background: rgba(255,255,255, calc(var(--frost-card-opacity, 0.72) + 0.20)) !important; backdrop-filter: blur(var(--frost-modal-blur, 20px)) saturate(1.2); -webkit-backdrop-filter: blur(var(--frost-modal-blur, 20px)) saturate(1.2); }
/* Capa 1 (debajo): imagen de fondo opcional. */
body::before {
  content: ""; position: fixed; inset: -40px; z-index: -2; pointer-events: none;
  /* Velo de color (configurable) sobre la imagen de fondo, para que el cristal lea bien. */
  background-image:
    linear-gradient(0deg, rgb(var(--frost-bg-tint-rgb, 238 242 248) / var(--frost-bg-tint, 0)), rgb(var(--frost-bg-tint-rgb, 238 242 248) / var(--frost-bg-tint, 0))),
    var(--frost-bg-image, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: saturate(1.05) blur(var(--frost-bg-blur, 0px));
}
/* Capa 2 (encima de la imagen, debajo del contenido): gradiente cálido (calidez ajustable). */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgb(0 87 184 / 0.06), transparent 38%),
    radial-gradient(circle at 92% 4%, rgb(6 182 212 / 0.06), transparent 34%),
    linear-gradient(135deg,
      rgb(255 138 101 / calc(0.07 * var(--frost-bg-warmth, 1))) 0%,
      rgb(255 196 140 / calc(0.06 * var(--frost-bg-warmth, 1))) 30%,
      rgb(255 247 235 / calc(0.09 * var(--frost-bg-warmth, 1))) 55%,
      rgb(186 230 253 / calc(0.10 * var(--frost-bg-warmth, 1))) 85%,
      rgb(221 214 254 / calc(0.10 * var(--frost-bg-warmth, 1))) 100%),
    linear-gradient(180deg, rgb(248 250 252 / var(--frost-bg-veil, 0.9)), rgb(238 242 248 / var(--frost-bg-veil, 0.9)));
}

/* ── Header (cristal blanco translúcido) ── */
.tc-platform-header {
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  color: #1e293b;
  font-family: var(--font-display);
  /* Sin border-bottom (el filo se da por box-shadow). main 64 + nav 52 con box-sizing:border-box
     = 116px total, IGUAL que ClasCon/GRP (Tailwind border-box); paneles usan --tc-header-h (runtime). */
  background:
    radial-gradient(circle at 12% 18%, rgb(0 87 184 / 0.10), transparent 36%),
    radial-gradient(circle at 90% 8%, rgb(6 182 212 / 0.10), transparent 32%),
    linear-gradient(180deg, rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.50));
  box-shadow: 0 14px 32px rgb(15 23 42 / 0.10), inset 0 -1px 1px rgb(255 255 255 / 0.62);
  backdrop-filter: blur(var(--frost-header-blur)) saturate(1.28);
  -webkit-backdrop-filter: blur(var(--frost-header-blur)) saturate(1.28);
}
/* Como ClasCon/GRP (Tailwind preflight): padding DENTRO → header total = 116px (no 142). */
.tc-platform-header, .tc-platform-header * { box-sizing: border-box; }
.tc-platform-header-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 64px; padding: 0.45rem 1.5rem 0.2rem; overflow: visible;
}
.tc-platform-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.tc-platform-logo { height: 46px; width: auto; object-fit: contain; flex-shrink: 0; margin-right: 0.55rem; }
.tc-platform-titleblock { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.tc-platform-eyebrow { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; color: #64748b; text-transform: uppercase; line-height: 1; margin-bottom: 0.18rem; }
.tc-platform-appname { color: #0f172a; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: clamp(9rem, 28vw, 34rem); }

.tc-platform-pill, .tc-platform-status {
  border-radius: 999px; padding: 0.18rem 0.55rem; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  background: rgb(255 255 255 / 0.62); color: #475569; border: 1px solid rgb(255 255 255 / 0.86);
  backdrop-filter: blur(8px);
}
.tc-platform-status { display: inline-flex; align-items: center; gap: 0.38rem; }
.tc-status-dot { width: 0.38rem; height: 0.38rem; border-radius: 999px; background: #94a3b8; flex-shrink: 0; }
.tc-status-ok .tc-status-dot { background: #34d399; }
.tc-status-error .tc-status-dot { background: #fb7185; }
.tc-status-sync .tc-status-dot { background: #facc15; animation: tc-frost-pulse 1.4s infinite; }
@keyframes tc-frost-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.tc-platform-actions { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }
.tc-header-icon-button {
  width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: rgb(255 255 255 / 0.56); color: #334155; border: 1px solid rgb(255 255 255 / 0.80);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.62), 0 4px 10px rgb(15 23 42 / 0.06);
  backdrop-filter: blur(12px) saturate(1.18); cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.tc-header-icon-button:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.9); color: #0057b8;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.8), 0 8px 18px rgb(0 87 184 / 0.18); transform: translateY(-1px);
}
.tc-header-icon-button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Opacidad de los iconos (ajuste frost compartido --frost-icon-opacity). */
.tc-platform-header .tc-header-icon-button svg, .tc-platform-header .tc-platform-nav-link svg, .tc-platform-header .tc-header-logout-button svg { opacity: var(--frost-icon-opacity, 1); }
/* Ayuda: igual que ClasCon frost = botón de cristal (NO amarillo) con "?" de texto. */
.tc-header-help-mark { display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 900; line-height: 1; }
.tc-header-alert-button {
  display: inline-flex; align-items: center; gap: 0.3rem; height: 2.3rem; padding: 0 0.75rem;
  font-size: 0.72rem; font-weight: 800; background: #ea580c; color: #fff;
  border: 1px solid rgb(255 255 255 / 0.55); border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 12px rgb(234 88 12 / 0.28);
}

.tc-user-chip { display: flex; align-items: center; gap: 0.62rem; height: 2.6rem; background: transparent; border: none; padding: 0; color: #0f172a; }
.tc-user-avatar {
  width: 2.4rem; height: 2.4rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #0057b8; flex-shrink: 0;
  background: radial-gradient(circle at 24% 24%, rgb(255 255 255 / 0.78), transparent 56%), rgb(255 255 255 / 0.66);
  border: 1px solid rgb(255 255 255 / 0.82); box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.78), 0 4px 10px rgb(15 23 42 / 0.06);
}
.tc-user-copy { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.tc-user-copy strong { color: #0f172a; font-weight: 500; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-user-copy > span { color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; }

/* ── Fila de navegación ── */
.tc-platform-navigation-row { position: relative; display: flex; align-items: center; justify-content: center; height: 52px; padding: 0.35rem 1.5rem 0.6rem; }
.tc-platform-nav { display: flex; align-items: center; max-width: 100%; overflow: visible; }
.tc-platform-nav-pill { display: flex; align-items: center; gap: 0.62rem; }
.tc-platform-nav-link {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.4rem; border-radius: 999px; padding: 0 1rem;
  color: #64748b; font-family: var(--font-display); font-size: 0.76rem; font-weight: 600; white-space: nowrap;
  border: none; background: transparent; cursor: pointer; transition: color 160ms ease, background-color 160ms ease;
}
.tc-platform-nav-link:hover { color: #0284c7; }
.tc-platform-nav-link.is-icons-only { width: 2.4rem; height: 2.4rem; min-height: 2.4rem; padding: 0; justify-content: center; aspect-ratio: 1 / 1; flex: 0 0 auto; }
.tc-platform-nav-link-active, .tc-platform-nav-link-active:hover {
  color: #fff;
  background: radial-gradient(circle at 22% 22%, rgb(255 255 255 / 0.36), transparent 56%), linear-gradient(135deg, #0057b8 0%, #0284c7 56%, #06b6d4 100%);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.38);
}

.tc-header-undo-group { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); display: flex; background: rgb(255 255 255 / 0.5); border-radius: 999px; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.72); }
.tc-header-undo-group button { padding: 4px 11px; border: none; background: transparent; cursor: pointer; color: #0057b8; font-size: 14px; line-height: 1; }
.tc-header-undo-group button:disabled { color: #cbd5e1; cursor: default; }

@media (max-width: 820px) {
  .tc-platform-pill { display: none; }
  .tc-user-copy { display: none; }
  .tc-platform-nav-link { padding: 0; font-size: 0.72rem; }
  .tc-header-undo-group { display: none; }
}

/* ── Tooltip tematizado (oscuro) para elementos con data-tooltip (nav icon-only, etc.) ── */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; left: 50%; top: calc(100% + 9px); transform: translateX(-50%);
  background: rgb(255 255 255 / 0.92); color: #0f3f79; font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; z-index: 2000; pointer-events: none;
  border: 1px solid rgb(255 255 255 / 0.8);
  backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--frost-surface-blur, 16px)) saturate(1.2);
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.18);
}
[data-tooltip]:hover::before {
  content: ""; position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: rgb(255 255 255 / 0.92); z-index: 2000; pointer-events: none;
}

/* ── GridBoard (Fase E): asas de mover/redimensionar ocultas hasta hover o interacción ── */
.tc-grid-handle { opacity: 0; transition: opacity 0.12s ease; }
.tc-grid-tile:hover .tc-grid-handle,
.tc-grid-tile.is-active .tc-grid-handle { opacity: 1; }
.tc-grid-tile.is-active { cursor: grabbing; }
.tc-grid-handle:active { cursor: grabbing; }
:root {
  --tc-blue: rgb(0, 87, 184);
  --tc-blue-soft: rgba(0, 87, 184, 0.08);
  --tc-text: #1d1d1f;
  --tc-muted: #6e6e73;
  --tc-border: rgba(15, 23, 42, 0.08);
  --tc-surface: #ffffff;
}

.tc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.tc-section-header--primary {
  background: var(--tc-blue);
  color: #fff;
}

.tc-section-header__title {
  margin: 0;
  color: inherit;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.tc-section-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tc-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.tc-switch:disabled {
  cursor: default;
  opacity: 0.45;
}

.tc-switch__track {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  padding: 2px;
  box-sizing: border-box;
}

.tc-switch__thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tc-blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.tc-switch__thumb.is-active {
  transform: translateX(16px);
}

.tc-switch__label {
  color: currentColor;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.tc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 8px;
  min-width: 30px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.tc-badge--soft {
  background: var(--tc-blue-soft);
  color: var(--tc-blue);
  border: 1px solid rgba(0, 87, 184, 0.14);
}

.tc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tc-button--primary {
  background: var(--tc-blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 87, 184, 0.16);
}

.tc-button--ghost {
  background: rgba(0, 0, 0, 0.06);
  color: var(--tc-text);
}

.tc-button:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}


.tc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.tc-field__label {
  font-size: 12px;
  font-weight: 750;
  color: var(--tc-text);
}

.tc-field__hint {
  font-size: 11px;
  color: var(--tc-muted);
}

.tc-field__error {
  font-size: 11px;
  color: #ff3b30;
  font-weight: 650;
}

.tc-input, .tc-select, .tc-search-select__input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tc-input:focus, .tc-select:focus, .tc-search-select__input:focus {
  border-color: rgba(0, 87, 184, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.10);
}

.tc-input:disabled, .tc-select:disabled, .tc-search-select__input:disabled {
  background: rgba(0, 0, 0, 0.04);
  color: var(--tc-muted);
}

.tc-empty-state {
  padding: 34px 20px;
  text-align: center;
  color: var(--tc-muted);
}

.tc-empty-state__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tc-blue-soft);
  color: var(--tc-blue);
}

.tc-empty-state--success .tc-empty-state__icon {
  background: rgba(52, 199, 89, 0.12);
  color: #34c759;
}

.tc-empty-state--danger .tc-empty-state__icon {
  background: rgba(255, 59, 48, 0.10);
  color: #ff3b30;
}

.tc-empty-state__title {
  font-size: 16px;
  font-weight: 780;
  color: var(--tc-text);
}

.tc-empty-state__description {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
}

.tc-empty-state__action {
  margin-top: 14px;
}


.tc-dropdown-list-no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 100%;
  box-sizing: border-box;
}

.tc-dropdown-list-no-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.kanban-shell {
  overflow-x: auto;
  padding-bottom: 18px;
  background: rgb(0, 87, 184);
}

.kanban-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(0, 87, 184);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.kanban-header-title {
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.kanban-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.kanban-switch-track {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  padding: 2px;
}

.kanban-switch-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgb(0, 87, 184);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}

.kanban-switch-thumb.is-active {
  transform: translateX(16px);
}

.kanban-switch-label {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.kanban-board-pro {
  display: flex;
  gap: 16px;
  align-items: stretch;
  padding: 12px;
  min-width: max-content;
  /* Contenedor de fases blanco FROST (nivel GRP/Planificación): translúcido, no opaco. */
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.kanban-col-pro {
  width: 286px;
  min-width: 286px;
  max-width: 286px;
  flex-shrink: 0;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  min-height: 520px;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}

.kanban-col-pro.is-dragover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 87, 184, 0.7);
  box-shadow: 0 20px 48px rgba(0, 87, 184, 0.22);
}

.kanban-col-header-pro {
  padding: 14px 14px 11px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 18px 18px 0 0;
  z-index: 1;
}

.kanban-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  min-height: 410px;
  overflow-y: auto;
}

.kanban-stage-header-row,
.kanban-card-main,
.kanban-card-title-row,
.kanban-card-rating-row,
.kanban-card-footer,
.kanban-time-in-stage {
  display: flex;
  align-items: center;
}

.kanban-stage-header-row {
  justify-content: space-between;
  gap: 10px;
}

.kanban-stage-title-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.kanban-stage-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}

.kanban-stage-text {
  min-width: 0;
}

.kanban-stage-name {
  font-size: 14px;
  font-weight: 850;
  color: #27324a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-stage-id {
  font-size: 10px;
  color: #8e8e93;
  font-weight: 700;
  margin-top: 1px;
}

.kanban-stage-count {
  min-width: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 850;
  border-radius: 999px;
  padding: 4px 8px;
}

.kanban-card-pro {
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.kanban-card-pro:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
  border-color: rgba(10, 102, 194, 0.28);
}

.kanban-card-pro:active {
  cursor: grabbing;
  transform: scale(0.995);
}

.kanban-card-main {
  gap: 10px;
  align-items: flex-start;
}

.kanban-card-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.3px;
  background: #eaf2ff;
  color: #0a66c2;
  flex-shrink: 0;
}

.kanban-card-content {
  flex: 1;
  min-width: 0;
}

.kanban-card-title-row {
  gap: 6px;
  min-width: 0;
}

.kanban-external-icon {
  flex-shrink: 0;
}

.kanban-card-title {
  font-size: 13px;
  font-weight: 850;
  color: #1f2937;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.kanban-quality-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kanban-card-subtitle {
  font-size: 11px;
  color: #7b8190;
  margin-top: 3px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-rating-row {
  gap: 6px;
  margin-top: 9px;
}

.kanban-card-skeleton {
  height: 8px;
  border-radius: 999px;
  background: #e8edf3;
  flex: 1;
  max-width: 130px;
}

.kanban-card-unrated {
  font-size: 10px;
  color: #a1a1aa;
  font-weight: 700;
}

.kanban-card-footer {
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  color: #9ca3af;
  font-size: 11px;
}

.kanban-time-in-stage {
  gap: 4px;
}

.kanban-time-icon {
  width: 10px;
  height: 10px;
  border: 1.5px solid #c6cbd3;
  border-radius: 50%;
  display: inline-block;
}

.kanban-salary {
  color: #0a66c2;
  font-weight: 800;
}

.kanban-empty-drop {
  border: 1px dashed rgba(15, 23, 42, 0.16);
  border-radius: 14px;
  padding: 18px 10px;
  text-align: center;
  color: #8e8e93;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.55);
}

/* v7.1.3 · Kanban Pro refinements */
.kanban-shell {
  border-radius: 18px;
  padding-top: 0;
  background: transparent;
}

.kanban-board-pro {
  padding: 14px;
  scroll-snap-type: x proximity;
  /* Contenedor de fases: BLANCO FROST translúcido (nivel GRP/Planificación, no opaco). */
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 12px 32px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.kanban-col-pro {
  scroll-snap-align: start;
  /* El fondo (tinte suave del color de la fase) se aplica INLINE en KanbanColumn. */
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.kanban-col-header-pro {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

.kanban-col-body {
  padding-bottom: 18px;
}

.kanban-card-pro {
  position: relative;
  border-color: rgba(15, 23, 42, 0.07);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}

.kanban-card-pro::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.18;
}

.kanban-card-avatar {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.kanban-card-skeleton {
  background: linear-gradient(90deg, #edf2f7 0%, #f7fafc 52%, #edf2f7 100%);
}

.kanban-empty-drop {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.35;
}

/* v7.1.4 · Seguimiento de fases */
.kanban-stage-tracking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.055);
  color: #8e8e93;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.kanban-phase-track {
  margin-top: 10px;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.055);
}

.kanban-phase-track-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #6b7280;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.kanban-phase-track-bar {
  height: 5px;
  margin-top: 6px;
  border-radius: 999px;
  background: #e8edf3;
  overflow: hidden;
}

.kanban-phase-track-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  opacity: 0.82;
}

.kanban-phase-track-last {
  margin-top: 5px;
  color: #8e8e93;
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-header-switch .tc-switch__label {
  color: #ffffff;
  font-weight: 400;
}

.kanban-header-switch .tc-switch__track {
  background: rgba(255,255,255,0.96);
}

/* ── Menú contextual de tarjeta (clic derecho) ───────────────────────────── */
.kanban-ctx-overlay { position: fixed; inset: 0; z-index: 1100; }
.kanban-ctx-menu {
  position: fixed; width: 260px; max-height: 460px; display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(0,0,0,0.10); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28); padding: 8px; overflow: hidden;
}
.kanban-ctx-title {
  font-size: 12px; font-weight: 800; color: #1d1d1f; padding: 6px 8px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kanban-ctx-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 9px; border: none; background: transparent; border-radius: 9px;
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: #1d1d1f; font-family: inherit;
}
.kanban-ctx-item:hover { background: rgba(0,87,184,0.08); }
.kanban-ctx-item:disabled { opacity: 0.4; cursor: default; }
.kanban-ctx-item.danger { color: #b91c1c; font-weight: 800; }
.kanban-ctx-item.danger:hover { background: rgba(255,59,48,0.10); }
.kanban-ctx-sep { height: 1px; background: rgba(0,0,0,0.07); margin: 5px 2px; }
.kanban-ctx-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #86868b; padding: 4px 9px 3px; }
.kanban-ctx-scroll { overflow-y: auto; max-height: 200px; }
.kanban-ctx-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.candidate-detail-tabs {
  display: flex;
  gap: 2px;
  padding: 2px 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  font-family: var(--font-display, system-ui, sans-serif);
}

.candidate-detail-tab {
  flex: 1;
  padding: 11px 6px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.candidate-detail-tab:hover {
  color: #0284c7;
  background: rgba(0, 87, 184, 0.05);
}

.candidate-detail-tab.is-active {
  color: rgb(0, 87, 184);
  border-bottom-color: rgb(0, 87, 184);
  font-weight: 700;
  background: rgba(0, 87, 184, 0.06);
}

.candidate-detail-tab-badge.notes {
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  padding: 0 5px;
  background: rgba(0, 87, 184, 0.11);
  color: rgb(0, 87, 184);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
}

.candidate-detail-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.candidate-detail-tab-warning {
  font-size: 11px;
  line-height: 12px;
  color: #f59e0b;
  font-weight: 900;
}

.candidate-detail-tab-warning.is-critical {
  color: #dc2626;
}

.candidate-detail-tab-warning.is-warning {
  color: #f59e0b;
}
/* Global styles */

/* Barra de scroll discreta — EXACTAMENTE la técnica de GCon/GRP: barra 100% custom
   vía ::-webkit-scrollbar (Chromium/Edge), fina, gris y redondeada, en lugar de la
   gruesa por defecto. Aplica a la página y a todo contenedor con scroll (los que la
   ocultan con .*-no-scrollbar siguen ocultándola, su regla es más específica).
   IMPORTANTE: NO declarar scrollbar-width/scrollbar-color globalmente en Chromium:
   al usar la propiedad ESTÁNDAR, Chrome/Edge IGNORAN los ::-webkit-scrollbar y se
   pinta una barra distinta a la de GCon. La versión estándar se reserva a Firefox
   (el @supports con -moz-appearance solo es verdadero en Firefox; Chromium lo omite). */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
}
/* scrollbar-gutter:stable → reserva SIEMPRE el hueco de la barra de scroll del viewport (la ventana es
   la que scrollea en GCan); así, al pasar de una pantalla corta (sin barra) a una larga (con barra), el
   ancho NO cambia y la retícula del tablero no se reconfigura (misma causa raíz que en GRP). */
html { scrollbar-gutter: stable; }

/* Guardarrail: la ficha de candidato nunca debe entrar en el flujo de la pagina.
   Aunque el componente se renderice desde una vista o se pierdan estilos inline,
   esta clase fuerza el comportamiento de side panel derecho. */
.tc-candidate-side-panel {
  position: fixed !important;
  top: var(--tc-header-h, 116px) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 480px !important;
  max-width: min(480px, 100vw) !important;
  height: calc(100vh - var(--tc-header-h, 116px)) !important;
  max-height: calc(100vh - var(--tc-header-h, 116px)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 5000 !important;
  background: rgba(255,255,255, var(--frost-detail-opacity, var(--frost-card-opacity, 0.72))) !important;
  backdrop-filter: blur(var(--frost-detail-blur, var(--frost-surface-blur, 16px))) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(var(--frost-detail-blur, var(--frost-surface-blur, 16px))) saturate(1.2) !important;
  box-shadow: -4px 0 24px rgba(15,23,42,0.14) !important;
}

.tc-candidate-side-panel * {
  box-sizing: border-box;
}

/* v5.6 guardarrail: el CONTENEDOR global del side panel es el único elemento
   responsable de la posición lateral. Evita que la ficha vuelva a renderizarse
   dentro del flujo de Base de Datos u otra vista. */
#tc-global-candidate-sidepanel,
.tc-global-candidate-sidepanel {
  position: fixed !important;
  top: var(--tc-header-h, 116px) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 480px !important;
  max-width: 100vw !important;
  height: calc(100vh - var(--tc-header-h, 116px)) !important;
  z-index: 9000 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: rgba(255,255,255, var(--frost-detail-opacity, var(--frost-card-opacity, 0.72))) !important;
  backdrop-filter: blur(var(--frost-detail-blur, var(--frost-surface-blur, 16px))) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(var(--frost-detail-blur, var(--frost-surface-blur, 16px))) saturate(1.2) !important;
  box-shadow: -8px 0 32px rgba(15,23,42,0.20) !important;
}

.tc-candidate-side-panel__content {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}