/*
 * Procexx Inbox — capa visual UX (no-core)
 * Ver docs/PROCECX_INBOX_UX.md para alcance, inyeccion y reversion.
 *
 * Pase 4 (2026-09-10): rediseno estructural de navegacion. Sustituye por
 * completo el bloque ".procexx-qa" (Accesos rapidos) de pases anteriores por
 * ".procexx-nav" — jerarquia fija MI TRABAJO / CANALES / GESTION /
 * ADMINISTRACION, generada por procexx-inbox-client-ux.js a partir de filas
 * reales de Chatwoot (mismo href, mismo contador, mismo estado activo).
 *
 * Reglas de diseno:
 *  - Cero layout roto: solo color, tipografia, espaciado y bordes propios
 *    de nodos que este mismo JS crea. Los nodos nativos ocultados solo
 *    reciben display:none (reversible, ver .procexx-native-hidden).
 *  - Paleta base Procexx (#139DA6 / #1ED4DE) para estados "neutros/marca";
 *    ambar solo para "esperando accion"; rojo reservado para error/urgencia
 *    real (no se usa aqui, Chatwoot ya lo aplica donde corresponde).
 *  - Identidad de canal (WhatsApp/Email/Instagram/Web) es decorativa, nunca
 *    sustituye al color de estado (ambar/azul/gris/rojo).
 */

/* ---------- Estado activo en filas nativas que siguen visibles ---------- */
aside a.active,
aside [role="button"].active {
  box-shadow: inset 3px 0 0 0 rgba(19, 157, 166, 0.65);
}

/* ---------- Bandeja personal (nativa, sigue visible: no forma parte de la
   nueva jerarquia MI TRABAJO/CANALES/GESTION/ADMINISTRACION) ---------- */
aside a[title="Bandeja personal"] {
  background-color: rgba(19, 157, 166, 0.08);
  border-radius: 0.5rem;
  font-weight: 600;
}

/* ---------- Ocultado reversible de nodos nativos duplicados ----------
   Anadido por procexx-inbox-client-ux.js SOLO a las filas que la nueva
   navegacion ya cubre por completo (Todas/Desatendido/Menciones/Bandejas
   y las cabeceras de Contactos/Informes/Campanas/Ajustes). No se toca
   ningun otro nodo: Participando, Carpetas, Equipos, Etiquetas, Empresas,
   Centro de ayuda, Captain, Llamadas y Bandeja personal siguen exactamente
   igual que en Chatwoot nativo. */
aside .procexx-native-hidden {
  display: none !important;
}

/* =======================================================================
 * .procexx-nav — bloque nuevo, primer hijo de <nav> dentro de <aside>.
 * ===================================================================== */
.procexx-nav {
  display: grid;
  gap: 1rem;
  margin: 0 0 0.875rem 0;
  padding: 0.125rem 0.125rem 0.875rem;
  border-bottom: 1px solid rgba(100, 116, 139, 0.18);
}

.procexx-nav__section {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.procexx-nav__section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(15, 118, 126, 0.85);
  padding: 0 0.25rem;
}

.procexx-nav__section--management .procexx-nav__section-label,
.procexx-nav__section--admin .procexx-nav__section-label {
  color: rgba(100, 116, 139, 0.85);
}

.procexx-nav__section-body {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

/* ---------- MI TRABAJO: tarjetas grandes, una por fila ---------- */
.procexx-nav__tile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  background-color: rgba(100, 116, 139, 0.05);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.procexx-nav__tile:hover {
  background-color: rgba(100, 116, 139, 0.1);
}

.procexx-nav__tile-dot {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background-color: rgba(100, 116, 139, 0.4);
}

.procexx-nav__tile-body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
}

.procexx-nav__tile-text {
  font-size: 0.8438rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.procexx-nav__tile-caption {
  font-size: 0.6875rem;
  font-weight: 400;
  color: rgba(71, 85, 105, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.procexx-nav__tile.is-active {
  box-shadow: inset 3px 0 0 0 rgba(19, 157, 166, 0.7);
}

/* Por responder: ambar suave — "alguien espera", nunca rojo. */
.procexx-nav__tile--unattended {
  border-color: rgba(217, 119, 6, 0.28);
  background-color: rgba(217, 119, 6, 0.09);
}
.procexx-nav__tile--unattended:hover {
  background-color: rgba(217, 119, 6, 0.15);
}
.procexx-nav__tile--unattended .procexx-nav__tile-dot {
  background-color: rgba(217, 119, 6, 0.85);
}

/* Mis conversaciones: azul Procexx — activo/asignado a mi. */
.procexx-nav__tile--mine {
  border-color: rgba(19, 157, 166, 0.32);
  background-color: rgba(19, 157, 166, 0.09);
}
.procexx-nav__tile--mine:hover {
  background-color: rgba(19, 157, 166, 0.15);
}
.procexx-nav__tile--mine .procexx-nav__tile-dot {
  background-color: rgba(19, 157, 166, 0.85);
}

/* Sin asignar: neutro, indicador visible en vez de contador (no hay una
   ruta propia que dar como cierta — ver docs, Limitaciones). */
.procexx-nav__tile--unassigned {
  border-color: rgba(100, 116, 139, 0.3);
  background-color: rgba(100, 116, 139, 0.07);
}
.procexx-nav__tile--unassigned:hover {
  background-color: rgba(100, 116, 139, 0.13);
}
.procexx-nav__tile--unassigned .procexx-nav__tile-dot {
  background-color: rgba(100, 116, 139, 0.55);
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.18);
}

/* Menciones: tratamiento diferenciado (violeta suave), ni estado ni canal. */
.procexx-nav__tile--mentions {
  border-color: rgba(147, 51, 234, 0.22);
  background-color: rgba(147, 51, 234, 0.07);
}
.procexx-nav__tile--mentions:hover {
  background-color: rgba(147, 51, 234, 0.12);
}
.procexx-nav__tile--mentions .procexx-nav__tile-dot {
  background-color: rgba(147, 51, 234, 0.7);
}

/* En espera (status=pending): azul acero — "esperamos al cliente", distinto
   del ambar de "Por responder" (que es "el cliente nos espera a nosotros"). */
.procexx-nav__tile--pending {
  border-color: rgba(71, 105, 148, 0.28);
  background-color: rgba(71, 105, 148, 0.09);
}
.procexx-nav__tile--pending:hover {
  background-color: rgba(71, 105, 148, 0.15);
}
.procexx-nav__tile--pending .procexx-nav__tile-dot {
  background-color: rgba(71, 105, 148, 0.85);
}

/* Resueltas (status=resolved): verde — cierre, sin urgencia. Nunca lleva
   badge (ver JS, collectWorkSpecs: badgeText se fuerza a '' a proposito). */
.procexx-nav__tile--resolved {
  border-color: rgba(22, 163, 74, 0.24);
  background-color: rgba(22, 163, 74, 0.08);
}
.procexx-nav__tile--resolved:hover {
  background-color: rgba(22, 163, 74, 0.14);
}
.procexx-nav__tile--resolved .procexx-nav__tile-dot {
  background-color: rgba(22, 163, 74, 0.75);
}

/* Notificaciones (Pase 8): proxy 1:1 del centro de notificaciones nativo
   ("Bandeja personal"). Turquesa/azul suave, distinto del azul Procexx de
   "Mis conversaciones" para no confundir identidad de marca con esta
   funcion — coherente con el resto de MI TRABAJO (mismo lenguaje visual de
   punto de color, sin icono nuevo). */
.procexx-nav__tile--notifications {
  border-color: rgba(8, 145, 178, 0.26);
  background-color: rgba(8, 145, 178, 0.08);
}
.procexx-nav__tile--notifications:hover {
  background-color: rgba(8, 145, 178, 0.14);
}
.procexx-nav__tile--notifications .procexx-nav__tile-dot {
  background-color: rgba(8, 145, 178, 0.8);
}

/* ---------- Contadores ---------- */
.procexx-nav__badge {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  background-color: rgba(100, 116, 139, 0.18);
  color: rgba(30, 41, 59, 0.92);
}

.procexx-nav__badge--sm {
  min-width: 1.125rem;
  height: 1.125rem;
  font-size: 0.625rem;
}

/* ---------- CANALES: un grupo por channel_type, con sus bandejas reales
   debajo. El color identifica el canal; nunca sustituye al color de
   estado (ambar/azul/gris) que ya llevan las tarjetas de MI TRABAJO. */
.procexx-nav__channel {
  border-radius: 0.75rem;
  border: 1px solid rgba(100, 116, 139, 0.14);
  background-color: rgba(100, 116, 139, 0.03);
  overflow: hidden;
}

.procexx-nav__channel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.625rem;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.procexx-nav__channel-header:hover {
  background-color: rgba(100, 116, 139, 0.07);
}

.procexx-nav__channel-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: rgba(100, 116, 139, 0.5);
}

.procexx-nav__channel-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.procexx-nav__channel-chevron {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 1.5px solid rgba(100, 116, 139, 0.6);
  border-bottom: 1.5px solid rgba(100, 116, 139, 0.6);
  transform: rotate(45deg);
  margin: -0.125rem 0.125rem 0 0;
}

.procexx-nav__channel.is-collapsed .procexx-nav__channel-chevron {
  transform: rotate(-45deg);
  margin: 0.125rem 0.125rem 0 0;
}

.procexx-nav__channel-inboxes {
  display: grid;
  gap: 0.125rem;
  padding: 0 0.375rem 0.375rem;
}

.procexx-nav__channel.is-collapsed .procexx-nav__channel-inboxes {
  display: none;
}

.procexx-nav__inbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.procexx-nav__inbox-item:hover {
  background-color: rgba(100, 116, 139, 0.09);
}

.procexx-nav__inbox-item.is-active {
  background-color: rgba(19, 157, 166, 0.1);
  box-shadow: inset 3px 0 0 0 rgba(19, 157, 166, 0.7);
  font-weight: 600;
}

.procexx-nav__inbox-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.procexx-nav__inbox-wrap {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

/* ---------- Franja contextual [ Mias | Sin asignar | En espera | Resueltas ]
   bajo la bandeja activa. Cada boton es un Custom Filter real ("Sin
   asignar"/"En espera"/"Resueltas") o la propia bandeja ("Mias") — nunca un
   boton "Todas": no existe una ruta/filtro estable para eso en v4.17.1-ce
   (ver docs, Limitaciones). Si el Custom Filter de un boton no existe para
   esta bandeja, el boton simplemente no se renderiza (nunca un placeholder
   vacio ni deshabilitado que sugiera una funcion rota). ---------- */
.procexx-nav__context-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.125rem 0.5rem 0.375rem 1.625rem;
}

.procexx-nav__context-btn {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.3125rem 0.5rem;
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  color: rgba(51, 65, 85, 0.85);
  background-color: rgba(100, 116, 139, 0.08);
}

.procexx-nav__context-btn:hover {
  background-color: rgba(100, 116, 139, 0.16);
}

.procexx-nav__context-btn--mine.is-active {
  color: rgba(15, 118, 126, 0.95);
  background-color: rgba(19, 157, 166, 0.14);
  border-color: rgba(19, 157, 166, 0.3);
}

.procexx-nav__context-btn--unassigned.is-active {
  color: rgba(51, 65, 85, 0.95);
  background-color: rgba(100, 116, 139, 0.18);
  border-color: rgba(100, 116, 139, 0.32);
}

.procexx-nav__context-btn--pending.is-active {
  color: rgba(42, 68, 99, 0.95);
  background-color: rgba(71, 105, 148, 0.18);
  border-color: rgba(71, 105, 148, 0.32);
}

.procexx-nav__context-btn--resolved.is-active {
  color: rgba(21, 128, 61, 0.95);
  background-color: rgba(22, 163, 74, 0.16);
  border-color: rgba(22, 163, 74, 0.3);
}

/* Identidad de canal — solo en el punto (indicador) de la cabecera de
   grupo, para no competir visualmente con el estado de las tarjetas. */
.procexx-nav__channel--whatsapp .procexx-nav__channel-dot {
  background-color: rgba(37, 173, 94, 0.85);
}
.procexx-nav__channel--email .procexx-nav__channel-dot {
  background-color: rgba(51, 111, 161, 0.85);
}
.procexx-nav__channel--instagram .procexx-nav__channel-dot {
  background: linear-gradient(135deg, rgba(214, 90, 176, 0.85), rgba(168, 109, 214, 0.85));
}
.procexx-nav__channel--web .procexx-nav__channel-dot {
  background-color: rgba(30, 212, 222, 0.85);
}

/* ---------- GESTION / ADMINISTRACION: filas simples, sin colorear ---------- */
.procexx-nav__row {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.procexx-nav__row:hover {
  background-color: rgba(100, 116, 139, 0.08);
}

.procexx-nav__row.is-active {
  background-color: rgba(19, 157, 166, 0.09);
  box-shadow: inset 3px 0 0 0 rgba(19, 157, 166, 0.7);
  font-weight: 600;
}

.procexx-nav__row-text {
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Modo oscuro ---------- */
@media (prefers-color-scheme: dark) {
  aside a.active,
  aside [role="button"].active {
    box-shadow: inset 3px 0 0 0 rgba(30, 212, 222, 0.65);
  }

  aside a[title="Bandeja personal"] {
    background-color: rgba(30, 212, 222, 0.14);
  }

  .procexx-nav {
    border-bottom-color: rgba(148, 163, 184, 0.22);
  }

  .procexx-nav__section-label {
    color: rgba(30, 212, 222, 0.85);
  }

  .procexx-nav__section--management .procexx-nav__section-label,
  .procexx-nav__section--admin .procexx-nav__section-label {
    color: rgba(148, 163, 184, 0.85);
  }

  .procexx-nav__tile {
    background-color: rgba(148, 163, 184, 0.07);
  }
  .procexx-nav__tile:hover {
    background-color: rgba(148, 163, 184, 0.14);
  }
  .procexx-nav__tile.is-active {
    box-shadow: inset 3px 0 0 0 rgba(30, 212, 222, 0.7);
  }

  .procexx-nav__tile--unattended {
    background-color: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.35);
  }
  .procexx-nav__tile--unattended:hover {
    background-color: rgba(245, 158, 11, 0.2);
  }

  .procexx-nav__tile--mine {
    background-color: rgba(30, 212, 222, 0.14);
    border-color: rgba(30, 212, 222, 0.35);
  }
  .procexx-nav__tile--mine:hover {
    background-color: rgba(30, 212, 222, 0.2);
  }

  .procexx-nav__tile--unassigned {
    background-color: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.35);
  }
  .procexx-nav__tile--unassigned:hover {
    background-color: rgba(148, 163, 184, 0.18);
  }

  .procexx-nav__tile--mentions {
    background-color: rgba(192, 132, 252, 0.14);
    border-color: rgba(192, 132, 252, 0.35);
  }
  .procexx-nav__tile--mentions:hover {
    background-color: rgba(192, 132, 252, 0.2);
  }

  .procexx-nav__tile--pending {
    background-color: rgba(125, 166, 219, 0.16);
    border-color: rgba(125, 166, 219, 0.38);
  }
  .procexx-nav__tile--pending:hover {
    background-color: rgba(125, 166, 219, 0.22);
  }

  .procexx-nav__tile--resolved {
    background-color: rgba(74, 222, 128, 0.14);
    border-color: rgba(74, 222, 128, 0.35);
  }
  .procexx-nav__tile--resolved:hover {
    background-color: rgba(74, 222, 128, 0.2);
  }

  .procexx-nav__tile--notifications {
    background-color: rgba(34, 211, 238, 0.14);
    border-color: rgba(34, 211, 238, 0.35);
  }
  .procexx-nav__tile--notifications:hover {
    background-color: rgba(34, 211, 238, 0.2);
  }

  .procexx-nav__context-btn {
    color: rgba(226, 232, 240, 0.85);
    background-color: rgba(148, 163, 184, 0.12);
  }
  .procexx-nav__context-btn:hover {
    background-color: rgba(148, 163, 184, 0.2);
  }
  .procexx-nav__context-btn--mine.is-active {
    color: rgba(30, 212, 222, 0.95);
    background-color: rgba(30, 212, 222, 0.16);
    border-color: rgba(30, 212, 222, 0.35);
  }
  .procexx-nav__context-btn--unassigned.is-active {
    color: rgba(226, 232, 240, 0.95);
    background-color: rgba(148, 163, 184, 0.22);
    border-color: rgba(148, 163, 184, 0.4);
  }
  .procexx-nav__context-btn--pending.is-active {
    color: rgba(191, 214, 245, 0.95);
    background-color: rgba(125, 166, 219, 0.2);
    border-color: rgba(125, 166, 219, 0.4);
  }
  .procexx-nav__context-btn--resolved.is-active {
    color: rgba(134, 239, 172, 0.95);
    background-color: rgba(74, 222, 128, 0.18);
    border-color: rgba(74, 222, 128, 0.35);
  }

  .procexx-nav__badge {
    background-color: rgba(148, 163, 184, 0.22);
    color: rgba(241, 245, 249, 0.92);
  }

  .procexx-nav__channel {
    border-color: rgba(148, 163, 184, 0.18);
    background-color: rgba(148, 163, 184, 0.05);
  }
  .procexx-nav__channel-header:hover {
    background-color: rgba(148, 163, 184, 0.1);
  }
  .procexx-nav__channel-chevron {
    border-color: rgba(148, 163, 184, 0.6);
  }

  .procexx-nav__inbox-item:hover {
    background-color: rgba(148, 163, 184, 0.12);
  }
  .procexx-nav__inbox-item.is-active {
    background-color: rgba(30, 212, 222, 0.16);
    box-shadow: inset 3px 0 0 0 rgba(30, 212, 222, 0.7);
  }

  .procexx-nav__row:hover {
    background-color: rgba(148, 163, 184, 0.12);
  }
  .procexx-nav__row.is-active {
    background-color: rgba(30, 212, 222, 0.14);
    box-shadow: inset 3px 0 0 0 rgba(30, 212, 222, 0.7);
  }

  /* Pase 12 (2026-09-14): identidad visual de agente — refuerzo de modo
     oscuro. Un color de agente arbitrario no tiene ninguna garantia de
     contraste contra un fondo oscuro (a diferencia de la paleta fija de
     arriba, que si esta curada para ambos modos) — se anade un segundo
     anillo oscuro detras del de color para que el punto/anillo siga siendo
     legible independientemente del hex concreto configurado. Mantenido
     dentro de este mismo bloque @media, siguiendo la convencion de un
     unico bloque dark por fichero ya establecida (ver cabecera). */
  .procexx-agent-ring {
    box-shadow:
      0 0 0 2px var(--procexx-agent-color, transparent),
      0 0 0 3px rgba(0, 0, 0, 0.35);
  }

  .procexx-agent-dot {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  }
}

/* -------------------------------------------------------------------------
 * Pase 12 (2026-09-14): identidad visual persistente de agente.
 * Ver cabecera de procexx-inbox-client-ux.js (mismo Pase) y
 * docs/RESPONSABLE_CLIENTE.md, seccion "Identidad visual".
 *
 * Estas reglas NUNCA fijan un color de agente: cada nodo decorado recibe
 * la variable CSS --procexx-agent-color inline, puesta por el JS a partir
 * de account_users.avatar_color (backend). Este bloque solo define COMO se
 * pinta esa variable — es la primera vez que este fichero usa variables
 * CSS (no habia ningun :root ni var() antes de este pase), porque el color
 * es arbitrario por agente, no uno de los estados fijos de mas arriba.
 * ------------------------------------------------------------------- */

/* Anillo sobre un avatar ya renderizado por Vue (Avatar.vue,
   span[role="img"]) — cero nodos nuevos, sigue el border-radius que ya
   tenga ese avatar (cuadrado/redondeado/circular). */
.procexx-agent-ring {
  box-shadow: 0 0 0 2px var(--procexx-agent-color, transparent);
}

/* Punto independiente para contextos sin Avatar propio (nombre de agente
   en texto plano: selector cerrado sin foto de perfil, mensaje de
   actividad). Mismo tamano/forma que .procexx-nav__tile-dot, pero color
   variable en vez de fijo. */
.procexx-agent-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--procexx-agent-color, rgba(100, 116, 139, 0.4));
  margin-right: 0.375rem;
  vertical-align: middle;
}

/* Variante ligeramente mas pequena dentro de la burbuja de actividad, para
   no competir visualmente con el texto nativo "Resuelta por X". */
.procexx-agent-dot--activity {
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: 0.5rem;
}
/* El refuerzo de modo oscuro para .procexx-agent-ring/.procexx-agent-dot
   vive dentro del unico bloque @media (prefers-color-scheme: dark) de este
   fichero (ver mas arriba, justo antes de su cierre) — no un segundo
   bloque — siguiendo la convencion ya establecida de un unico media query
   dark por fichero. */

/* =========================================================================
 * Pase 20 (Fase 3H-B, 2026-09-20): widget CLIENTE del panel de conversacion.
 * Ver cabecera de procexx-inbox-client-ux.js (mismo Pase) y
 * docs/CLIENT_HISTORY_MANUAL_ASSIGNMENT.md. Unico nodo interactivo (con
 * inputs/botones propios) que este fichero inyecta — el resto de este CSS
 * solo decora nodos ya renderizados por Vue.
 *
 * Nota de orden: el bloque dark de este pase va DESPUES de estas reglas
 * base (no dentro del bloque dark de cabecera) para que, con la misma
 * especificidad, la version oscura gane la cascada sobre la base — swap,
 * no fusion en un unico bloque dark del fichero.
 * ===================================================================== */
.procexx-client-widget {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(100, 116, 139, 0.18);
  background-color: rgba(19, 157, 166, 0.04);
}

.procexx-client-widget__header {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(19, 157, 166, 0.85);
  margin-bottom: 0.5rem;
}

.procexx-client-widget__status {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(15, 23, 42);
  line-height: 1.3;
}

.procexx-client-widget__meta {
  font-size: 0.75rem;
  color: rgba(100, 116, 139, 0.9);
  margin-top: 0.125rem;
}

.procexx-client-widget__meta--inactive {
  color: rgb(180, 83, 9);
}

.procexx-client-widget__error {
  font-size: 0.75rem;
  color: rgb(190, 18, 60);
  margin-top: 0.375rem;
}

.procexx-client-widget__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.procexx-client-widget__btn {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(100, 116, 139, 0.3);
  background-color: rgb(255, 255, 255);
  color: rgb(51, 65, 85);
  cursor: pointer;
}

.procexx-client-widget__btn:hover {
  background-color: rgba(100, 116, 139, 0.08);
}

.procexx-client-widget__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.procexx-client-widget__btn--primary {
  border-color: rgba(19, 157, 166, 0.6);
  background-color: rgb(19, 157, 166);
  color: rgb(255, 255, 255);
}

.procexx-client-widget__btn--primary:hover {
  background-color: rgb(16, 137, 145);
}

.procexx-client-widget__btn--danger {
  color: rgb(190, 18, 60);
  border-color: rgba(190, 18, 60, 0.35);
}

.procexx-client-widget__btn--danger:hover {
  background-color: rgba(190, 18, 60, 0.08);
}

/* ---- selector modal ---- */
.procexx-client-widget__modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(15, 23, 42, 0.45);
}

.procexx-client-widget__modal[hidden] {
  display: none;
}

.procexx-client-widget__modal-panel {
  width: 100%;
  max-width: 20rem;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
}

.procexx-client-widget__search {
  font-size: 0.8125rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(100, 116, 139, 0.35);
  background-color: rgb(255, 255, 255);
  color: rgb(15, 23, 42);
}

.procexx-client-widget__results {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-height: 14rem;
  overflow-y: auto;
}

.procexx-client-widget__result-row {
  text-align: left;
  font-size: 0.8125rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  background-color: transparent;
  color: rgb(15, 23, 42);
  cursor: pointer;
}

.procexx-client-widget__result-row:hover {
  background-color: rgba(100, 116, 139, 0.08);
}

.procexx-client-widget__result-row.is-selected {
  border-color: rgba(19, 157, 166, 0.6);
  background-color: rgba(19, 157, 166, 0.12);
  font-weight: 600;
}

.procexx-client-widget__hint {
  font-size: 0.8125rem;
  color: rgba(100, 116, 139, 0.9);
  padding: 0.375rem 0.5rem;
}

.procexx-client-widget__hint--error {
  color: rgb(190, 18, 60);
}

.procexx-client-widget__modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ---- dialogo "quitar clasificacion" ---- */
.procexx-client-widget__confirm-unclassify {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(15, 23, 42, 0.45);
}

.procexx-client-widget__confirm-unclassify[hidden] {
  display: none;
}

.procexx-client-widget__confirm-unclassify-panel {
  width: 100%;
  max-width: 20rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
}

.procexx-client-widget__confirm-unclassify-text {
  font-size: 0.8125rem;
  color: rgb(51, 65, 85);
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}

.procexx-client-widget__confirm-unclassify-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  .procexx-client-widget {
    border-color: rgba(148, 163, 184, 0.22);
    background-color: rgba(30, 212, 222, 0.06);
  }
  .procexx-client-widget__header {
    color: rgba(30, 212, 222, 0.85);
  }
  .procexx-client-widget__status {
    color: rgb(241, 245, 249);
  }
  .procexx-client-widget__meta {
    color: rgba(148, 163, 184, 0.9);
  }
  .procexx-client-widget__meta--inactive {
    color: rgb(251, 191, 36);
  }
  .procexx-client-widget__error {
    color: rgb(248, 113, 113);
  }
  .procexx-client-widget__btn {
    border-color: rgba(148, 163, 184, 0.35);
    background-color: rgba(148, 163, 184, 0.08);
    color: rgb(226, 232, 240);
  }
  .procexx-client-widget__btn:hover {
    background-color: rgba(148, 163, 184, 0.16);
  }
  .procexx-client-widget__btn--primary {
    border-color: rgba(30, 212, 222, 0.6);
    background-color: rgb(30, 212, 222);
    color: rgb(8, 47, 51);
  }
  .procexx-client-widget__btn--primary:hover {
    background-color: rgb(58, 220, 229);
  }
  .procexx-client-widget__btn--danger {
    color: rgb(248, 113, 113);
    border-color: rgba(248, 113, 113, 0.4);
  }
  .procexx-client-widget__btn--danger:hover {
    background-color: rgba(248, 113, 113, 0.12);
  }
  .procexx-client-widget__modal-panel,
  .procexx-client-widget__confirm-unclassify-panel {
    background-color: rgb(15, 23, 42);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
  .procexx-client-widget__search {
    background-color: rgb(30, 41, 59);
    border-color: rgba(148, 163, 184, 0.35);
    color: rgb(241, 245, 249);
  }
  .procexx-client-widget__result-row {
    color: rgb(241, 245, 249);
  }
  .procexx-client-widget__result-row:hover {
    background-color: rgba(148, 163, 184, 0.14);
  }
  .procexx-client-widget__result-row.is-selected {
    background-color: rgba(30, 212, 222, 0.16);
  }
  .procexx-client-widget__hint {
    color: rgba(148, 163, 184, 0.9);
  }
  .procexx-client-widget__hint--error {
    color: rgb(248, 113, 113);
  }
  .procexx-client-widget__confirm-unclassify-text {
    color: rgb(226, 232, 240);
  }
}