/* ── Crear Organización — panel de sub-organizaciones (PROD) ───────────────────────────────────
   Alineado con los tokens de css/docs.css para que el panel se lea como una página más de docs:
   bordes #e2e8f0 · superficies #fff / #f8fafc / #f1f5f9 · texto #0f172a / #475569 / #64748b
   radios 0.5rem (controles) · 0.75rem (tarjetas) · 9999px (pills) · azul #2563eb / #1d4ed8
   Los controles conservan min-height 44px (touch target WCAG) igual que .isw-in / .isw-btn-*.

   Todo va escopado bajo #co-root: assets/suborgs-model.js es un archivo compartido con el panel
   de mstar-health y emite nombres genéricos (pill, hint, empty, del, yes/no, conseq…) que no deben
   filtrarse al resto del sitio ni colisionar con docs.css.

   Color y significado: el color nunca va solo. En §3 cada permiso se enuncia en palabras y el color
   sólo lo agrupa, así que la información sobrevive en escala de grises y para daltonismo. */

#co-root { color: #475569; }

/* ── Avisos ── */
#co-root .warn {
  background: #fffbeb; border: 1px solid #fde68a; border-left: 3px solid #f59e0b;
  border-radius: 0.75rem; padding: 0.875rem 1rem; margin: 0.75rem 0;
  font-size: 0.875rem; line-height: 1.625; color: #92400e;
}
#co-root .warn strong, #co-root .warn b { color: #b45309; }

/* ── Tarjetas ── */
#co-root .co-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 0.75rem; padding: 1rem; margin: 0 0 0.75rem;
}
/* Contenedor de las secciones. Sin tratamiento visual propio: la página se lee como cualquier otra
   de docs. La barrera real está en el confirm() de «Aplicar», no en el color de la caja. */
#co-root .co-prod { margin: 0; }

/* ── Filas de controles ── */
#co-root .co-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.375rem 0; }
#co-root .co-row label { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: #475569; }
#co-root .co-actions { display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

/* ── Controles de formulario (espejo de .isw-in / .isw-btn-*) ── */
#co-root input,
#co-root select {
  min-height: 44px; /* touch target WCAG, igual que .isw-in */
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem;
  padding: 0.625rem 0.75rem; font-size: 0.875rem; color: #0f172a;
  font-family: inherit; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#co-root input::placeholder { color: #94a3b8; }
#co-root input:focus,
#co-root select:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgb(59 130 246 / .10); }
#co-root input:disabled,
#co-root select:disabled { background: #f1f5f9; color: #64748b; cursor: not-allowed; }
#co-root select { cursor: pointer; max-width: 100%; }

#co-root button {
  min-height: 44px; /* touch target WCAG */
  background: #fff; color: #0f172a; border: 1px solid #cbd5e1;
  padding: 0.625rem 1rem; border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
#co-root button:hover { background: #f8fafc; border-color: #94a3b8; }
#co-root button:active { transform: scale(0.97); }
#co-root button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
#co-root button.pri { background: #2563eb; color: #fff; border-color: #2563eb; }
#co-root button.pri:hover { background: #1d4ed8; border-color: #1d4ed8; }
#co-root button.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
#co-root button.danger:hover { background: #b91c1c; border-color: #b91c1c; }
#co-root button.danger:disabled { background: #e2e8f0; color: #94a3b8; border-color: #e2e8f0; }
/* Botón «quitar» de una fila: pequeño, no es un control de página. */
#co-root button.del {
  min-height: 0; padding: 0.125rem 0.5rem; border-radius: 0.375rem;
  border-color: #fecaca; color: #b91c1c; background: #fff;
  font-size: 0.75rem; font-weight: 600;
}
#co-root button.del:hover { background: #fef2f2; border-color: #fca5a5; }

/* ── Tablas (espejo de .docs-table) ── */
#co-root table {
  border-collapse: collapse; width: 100%; background: #fff;
  border-radius: 0.75rem; overflow: hidden;
  font-size: 0.8125rem; text-align: left;
}
#co-root thead tr { background: #f8fafc; color: #0f172a; font-size: 0.75rem; }
#co-root th {
  padding: 0.4375rem 0.625rem; font-weight: 700; color: #0f172a;
  border-bottom: 1px solid #e2e8f0; vertical-align: middle;
}
#co-root td {
  padding: 0.375rem 0.625rem; color: #475569; vertical-align: middle;
  border-bottom: 1px solid rgb(226 232 240 / .60);
}
#co-root tbody tr:last-child td { border-bottom: none; }
#co-root td.c { text-align: center; font-weight: 700; }
#co-root .co-th-num { width: 2.5rem; text-align: center; }
/* La matriz de §3 crece con el número de sub-orgs: hace scroll dentro de su caja. */
#co-root .co-scroll { overflow-x: auto; border-radius: 0.75rem; border: 1px solid #e2e8f0; }
#co-root .co-scroll > table { border-radius: 0; }

/* ── §2 · los dos grupos de una sub-organización ───────────────────────────────────────────────
   Los suyos y los que la alcanzan desde la madre son dos cosas distintas y van en dos tablas con
   título: en una sola lista no había forma de saber a quién hay que quitarle el rol y dónde. */
#co-root .co-grouphead {
  margin: 0.875rem 0 0.375rem; font-size: 0.8125rem; font-weight: 700; color: #0f172a;
}
#co-root .co-grouphead:first-child { margin-top: 0.25rem; }
#co-root .co-grouphead .hint { font-weight: 400; }
#co-root .co-grouphead--inh { color: #64748b; }
/* Heredados: se ven, pero se leen como contexto — no son miembros de esta sub-organización. */
#co-root .co-inherited {
  border-left: 3px solid #e2e8f0; border-radius: 0.5rem;
  background: #f8fafc; padding-left: 0.5rem;
}
#co-root .co-inherited table { background: transparent; font-size: 0.78125rem; }
#co-root .co-inherited td { color: #64748b; }

/* Organigrama, tags y destinos comparten UNA tarjeta: son un solo gesto, no tres pasos, y cada
   título de sección de más era un salto de 3 rem entre cosas que se usan juntas. Las reglas marcan
   las junturas sin partir nada. */
#co-root .co-sep {
  border: none; border-top: 1px solid #e2e8f0;
  margin: 0.875rem 0 0.75rem;
}
#co-root .co-subhead {
  margin: 0 0 0.375rem; font-size: 0.875rem; font-weight: 700; color: #0f172a;
}
/* La subcabecera lleva pegada su propia explicación en vez de un párrafo aparte: cada línea de
   prosa entre los destinos y la tabla empuja la tabla fuera de la pantalla, y era justo lo que la
   hacía parecer desaparecida. */
#co-root .co-subhead-note { font-weight: 400; font-size: 0.8125rem; color: #64748b; }

/* La letra pequeña —qué implica mover, mover vs. asignar, quién tiene permiso— entera pero plegada:
   se lee una vez y después sólo estorba entre el dibujo y los tags. */
#co-root .co-fine { margin-top: 0.625rem; }
#co-root .co-fine > summary {
  cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: #475569;
  padding: 0.25rem 0; list-style: revert;
}
#co-root .co-fine > summary:hover { color: #1d4ed8; }
#co-root .co-fine[open] > summary { margin-bottom: 0.25rem; }
#co-root .co-fine .co-note:first-of-type { margin-top: 0.25rem; }

/* ── §1 · la lista de tags ─────────────────────────────────────────────────────────────────────
   Alto máximo y cabecera pegajosa: con cientos de tags la página dejaba de tener fondo y había que
   subir a ciegas para volver a los filtros. Aquí el inventario hace scroll dentro de su caja y las
   las secciones de abajo se quedan a un dedo de distancia por muchos tags que haya. */
#co-root .co-taglist {
  max-height: 20rem; overflow: auto;
  border: 1px solid #e2e8f0; border-radius: 0.75rem;
  /* shift+clic para marcar un rango seleccionaría el texto de las filas de por medio. */
  user-select: none;
}
#co-root .co-taglist > table { border-radius: 0; }
#co-root .co-taglist thead th {
  position: sticky; top: 0; z-index: 1;
  background: #f8fafc;
  /* La fila pegajosa no arrastra su borde: se dibuja con la sombra. */
  box-shadow: inset 0 -1px 0 #e2e8f0;
  border-bottom: none;
}
#co-root .co-taglist tbody tr.is-sel { background: rgb(37 99 235 / .06); }
#co-root .co-taglist tbody tr:hover { background: rgb(148 163 184 / .08); }
#co-root .co-taglist tbody tr.is-sel:hover { background: rgb(37 99 235 / .10); }
#co-root .co-taglist input[type="checkbox"] {
  min-height: 0; width: 1rem; height: 1rem; padding: 0; margin: 0;
  accent-color: #2563eb; cursor: pointer; vertical-align: middle;
}
/* Los atajos de cantidad, en un solo bloque: se leen como una escala (5 · 10 · 25 · 50 · 100 ·
   todos) y no como seis botones sueltos compitiendo con el buscador. */
#co-root .co-pick {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border: 1px solid #cbd5e1; border-radius: 0.5rem; padding: 0.25rem 0.375rem 0.25rem 0.5rem;
  background: #fff; min-height: 44px;
}
#co-root .co-pick[hidden] { display: none; }
#co-root .co-pick-lbl { font-size: 0.75rem; font-weight: 700; color: #64748b; margin-right: 0.125rem; }
#co-root .co-pick > button {
  min-height: 32px; min-width: 2.25rem; padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem; border: 1px solid #e2e8f0; background: #f8fafc;
  font-size: 0.8125rem; font-weight: 700; color: #1d4ed8; font-variant-numeric: tabular-nums;
}
#co-root .co-pick > button:hover:not(:disabled) { background: #eff6ff; border-color: #93c5fd; }
#co-root .co-pick > button:disabled { color: #94a3b8; background: #f1f5f9; border-color: #e2e8f0; }

/* La barra de filtros va DEBAJO de la lista, con el contador dentro: así del dibujo se cae directo
   en los tags, sin nada en medio, y buscar/filtrar/marcar queda todo en un solo renglón.
   El buscador se lleva el espacio sobrante; los botones y el contador, sólo lo suyo. */
#co-root .co-tagbar { margin-top: 0.375rem; }
#co-root .co-tagbar > #tagQ { flex: 1 1 10rem; min-width: 0; max-width: 18rem; }
#co-root .co-tagbar > #tagCount { margin-left: auto; text-align: right; }
/* Acuse de «Copiar seriales»: verde un momento y de vuelta. El botón es su propio mensaje, así que no
   cambia de tamaño de golpe — un ancho mínimo evita que la barra dé un salto al mostrar el ✔. */
#co-root #tagCopy { min-width: 9.5rem; }
#co-root #tagCopy.co-ok {
  background: #ecfdf5; border-color: #a7f3d0; color: #047857;
}

/* Una fila cuyo tag ya va de viaje: comprometida, no repartible. Se atenúa y deja de invitar al
   arrastre, para que se lea de un vistazo cuáles quedan libres sin contar casillas. */
#co-root .co-taglist tbody tr.is-going { background: #fafafa; cursor: default; }
#co-root .co-taglist tbody tr.is-going code { opacity: .6; }
#co-root .co-taglist tbody tr.is-going input[type="checkbox"] { cursor: not-allowed; opacity: .45; }
#co-root .co-taglist tbody tr.is-going:hover { background: #fafafa; }

/* ── Lo ya entregado ───────────────────────────────────────────────────────────────────────────
   Un renglón bajo la barra, en verde apagado: es un registro de lo que ya pasó, no un control con el
   que se opere. Cada chip copia los seriales de SU lote. */
/* Ámbar mientras sólo está en el plan —un borrador que el refresco se lleva— y verde cuando ya se
   envió. El estado va también en el texto de la etiqueta y en un ✔ por chip, así que no depende del
   color para leerse. */
#co-root .co-done {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem;
  margin-top: 0.5rem; padding: 0.5rem 0.625rem;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 0.5rem;
}
#co-root .co-done .co-done-lbl { color: #b45309; }
#co-root .co-done .co-mini { color: #b45309; border-color: #fde68a; }
#co-root .co-done .co-mini:hover { background: #fffbeb; border-color: #fcd34d; }
/* Un chip ya enviado se lee en verde aunque el renglón siga en ámbar por sus compañeros. */
#co-root .co-done .co-mini--sent { color: #047857; border-color: #a7f3d0; }
#co-root .co-done .co-mini--sent:hover { background: #ecfdf5; border-color: #6ee7b7; }
#co-root .co-done--sent {
  background: #f0fdf4; border-color: #bbf7d0;
}
#co-root .co-done[hidden] { display: none; }
#co-root .co-done-lbl {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-right: 0.125rem;
}
#co-root .co-done .co-mini { background: #fff; font-variant-numeric: tabular-nums; }
#co-root .co-done--sent .co-done-lbl { color: #047857; }
#co-root .co-done--sent .co-mini { color: #047857; border-color: #a7f3d0; }
#co-root .co-done--sent .co-mini:hover { background: #ecfdf5; border-color: #6ee7b7; }
#co-root .co-done .co-mini--all { font-weight: 800; background: #ecfdf5; }
#co-root .co-done .co-mini.co-ok { background: #d1fae5; border-color: #34d399; }
#co-root .co-done-hint { margin-left: auto; font-size: 0.75rem; }
#co-root .pill.pend {
  background: #fffbeb; border-color: #fde68a; color: #b45309;
}

/* ── §3 · lo que sí puede cada quien ───────────────────────────────────────────────────────────
   Etiquetas enunciadas, no ✓/✗ en una rejilla: el permiso se lee en palabras y la ausencia significa
   que no lo tiene. El color acompaña, pero cada etiqueta se explica sola en texto. */
#co-root .co-can {
  display: inline-block; margin: 0.125rem 0.25rem 0.125rem 0;
  padding: 0.1875rem 0.5rem; border-radius: 0.375rem;
  font-size: 0.75rem; line-height: 1.5;
  background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155;
}
#co-root .co-can b { color: #0f172a; }
#co-root .co-can--see { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
#co-root .co-can--see b { color: #1d4ed8; }
#co-root .co-can--buy { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
#co-root #powers td:first-child { color: #0f172a; font-weight: 600; }
#co-root #powers .co-of { display: block; margin-top: 0.125rem; }


/* ── Pills (espejo de .role-badge / .ver-badge) ── */
#co-root .pill {
  display: inline-block; padding: 0.125rem 0.5rem; border-radius: 9999px;
  font-size: 0.6875rem; font-weight: 600; line-height: 1.5;
  border: 1px solid #e2e8f0; background: #f1f5f9; color: #475569;
}
#co-root .pill.sub { background: rgb(37 99 235 / .10); border-color: rgb(37 99 235 / .22); color: #1d4ed8; }

/* ── Texto auxiliar ── */
#co-root .hint { color: #64748b; font-size: 0.8125rem; line-height: 1.625; }
#co-root .co-note { color: #64748b; font-size: 0.8125rem; line-height: 1.5; margin-bottom: 0.5rem; }
#co-root .empty { color: #94a3b8; font-style: italic; font-size: 0.8125rem; }
#co-root code {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  padding: 0.0625rem 0.3rem; border-radius: 0.25rem;
  font-size: 0.8125em; color: #0f172a;
}

/* ── Estructura · el grafo (dendrograma: la organización a la izquierda, sus sub-orgs apiladas) ──
   Las etiquetas llevan un halo blanco con paint-order:stroke, que las hace legibles cuando caen
   encima de una arista sin tener que empujar los nodos para dejar hueco. */
#co-root .co-graph {
  margin-top: 0.5rem; padding: 0.25rem 0;
  border: 1px solid #e2e8f0; border-radius: 0.75rem;
  background:
    radial-gradient(circle at 50% 50%, #f8fafc 0%, #fff 70%),
    #fff;
}
#co-root .co-graph svg { display: block; width: 100%; height: auto; }
/* El dendrograma crece hacia abajo con cada sub-org: a partir de cierto punto hace scroll dentro de
   su caja en vez de empujar lo de abajo fuera de la pantalla. */
#co-root .co-gviewport { max-height: 22rem; overflow: auto; }
#co-root .co-graph text {
  font-family: inherit; font-size: 13px; font-weight: 600; fill: #334155;
  paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round;
}
/* Aristas curvas: son <path>, así que hay que apagarles el relleno o se pintan como un abanico. */
#co-root .co-e { stroke: #cbd5e1; stroke-width: 1.5; fill: none; }
#co-root .co-n circle { stroke: #fff; stroke-width: 2.5; }
#co-root .co-n--root circle { fill: #0f172a; }
#co-root .co-n--root .co-lbl { fill: #0f172a; font-size: 14px; font-weight: 700; }
#co-root .co-n--sub circle { fill: #2563eb; }
#co-root .co-n--sub .co-lbl { fill: #1d4ed8; }
/* Pendiente = todavía no existe en el servidor, sólo en el plan. Contorno punteado y hueco. */
#co-root .co-n--pending circle { fill: #fff; stroke: #2563eb; stroke-width: 2; stroke-dasharray: 3 2.5; }
#co-root .co-n--pending .co-lbl { font-style: italic; }

/* El número de tags va DENTRO del círculo: sin halo (el contorno blanco de las etiquetas se lo
   comería a 11 px) y en blanco sobre el relleno del nodo. Las tres reglas llevan una clase de más que
   las de arriba, que si no le imponen al número el color y el tamaño de la etiqueta. */
#co-root .co-graph .co-n .co-num {
  font-size: 11px; font-weight: 700; fill: #fff;
  stroke: none; paint-order: normal;
}
#co-root .co-graph .co-n--root .co-num { font-size: 12px; }
/* Nodo pendiente: el círculo es hueco, así que el número tiene que ser oscuro para verse. */
#co-root .co-graph .co-n--pending .co-num { fill: #1d4ed8; }
/* «?» = todavía no se ha leído del servidor cuántos tags tiene esta sub-org — no es un 0 de verdad,
   así que se distingue con menos peso en vez de mentir con el mismo blanco sólido de un conteo real. */
#co-root .co-graph .co-num--unk { opacity: .75; font-size: 12px; }
#co-root .co-glegend .lg-num.co-num--unk { background: #94a3b8; opacity: 1; }
/* Segunda línea de la etiqueta: cuánta gente hay dentro, cuando ya se sabe. */
#co-root .co-graph .co-sub2 { font-size: 10.5px; font-weight: 600; fill: #94a3b8; }

/* ── Nodos que se pueden pulsar ────────────────────────────────────────────────────────────────
   El blanco de clic es un rectángulo transparente que cubre la FILA entera —círculo y nombre—, no
   sólo el círculo de 13 px: el nombre está justo al lado y pulsarlo es el gesto natural. */
#co-root .co-n[data-node] { cursor: pointer; }
/* Un globito con tags puestos en el plan se puede agarrar y llevar a la tabla para devolverlos. */
#co-root .co-n--devolvible { cursor: grab; }
body.co-dragging #co-root .co-n--devolvible { cursor: grabbing; }

/* «+ añadir persona» latiendo en una sub-organización recién creada: sin nadie dentro no le sirve a
   nadie, y el aviso está donde acabas de crearla en vez de en otra sección. El latido para en cuanto
   tiene gente — un parpadeo perpetuo se vuelve papel pintado y deja de avisar de nada. */
#co-root .co-needp { cursor: pointer; }
#co-root .co-needp .co-hit { fill: transparent; stroke: none; }
#co-root .co-needp circle {
  fill: #fff; stroke: #f59e0b; stroke-width: 1.5;
  animation: co-late 1.6s ease-in-out infinite;
}
#co-root .co-needp-plus { font-size: 10px; font-weight: 700; fill: #b45309; stroke: none; }
#co-root .co-needp-t {
  font-size: 10.5px; font-weight: 700; fill: #b45309;
  animation: co-late-t 1.6s ease-in-out infinite;
}
#co-root .co-needp:hover circle { fill: #fffbeb; stroke: #d97706; }
#co-root .co-needp:hover .co-needp-t { fill: #92400e; text-decoration: underline; }
@keyframes co-late {
  0%, 100% { stroke-width: 1.5; }
  50%      { stroke-width: 4; stroke: #fbbf24; }
}
@keyframes co-late-t {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* El fantasma del globito mientras se arrastra: dice cuántos tags se devolverían y de quién. */
#co-root .co-ghost {
  position: fixed; z-index: 61; pointer-events: none;
  display: flex; align-items: center; gap: 0.375rem;
  transform: translate(0.75rem, 0.75rem);
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 9999px;
  box-shadow: 0 10px 24px rgb(15 23 42 / .22);
  font-size: 0.8125rem; font-weight: 600; color: #0f172a;
}
#co-root .co-ghost[hidden] { display: none; }
#co-root .co-ghost-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  background: #2563eb; color: #fff; font-size: 0.75rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Más específico que las reglas de relleno de .co-n--sub / .co-n--pending, que si no le pintan al
   blanco de clic el color del nodo y aparece un bloque opaco encima del dibujo. */
#co-root .co-n .co-hit { fill: transparent; stroke: none; }
#co-root .co-n[data-node]:hover circle { fill: #1d4ed8; }
#co-root .co-n--root[data-node]:hover circle { fill: #1e293b; }
#co-root .co-n--pending[data-node]:hover circle { fill: #eff6ff; }
#co-root .co-n[data-node]:hover .co-lbl { text-decoration: underline; }
/* Abierto: anillo alrededor del nodo cuya tarjeta se está viendo, para no perder de vista cuál es. */
/* El «+» que cuelga de la raíz: crear una sub-organización desde el dibujo, donde estás mirando.
   Círculo punteado —lo mismo que marca «pendiente, sólo en el plan»— porque lo que crea es un paso del
   plan, no una organización en el servidor. El camino con teclado sigue siendo el campo de arriba. */
#co-root .co-add { cursor: pointer; }
/* Blanco de clic mayor que el dibujo del botón: 34 px de lado en vez de 20, que es lo que pide un
   objetivo táctil. Transparente, así que no se ve pero sí se pulsa. */
#co-root .co-add .co-hit { fill: transparent; stroke: none; }
#co-root .co-add circle {
  fill: #fff; stroke: #94a3b8; stroke-width: 1.5; stroke-dasharray: 3 2.5;
  transition: fill 0.15s, stroke 0.15s;
}
#co-root .co-add text {
  font-size: 15px; font-weight: 700; fill: #64748b; stroke: none;
  pointer-events: none; transition: fill 0.15s;
}
#co-root .co-add:hover circle { fill: #eff6ff; stroke: #2563eb; stroke-dasharray: none; }
#co-root .co-add:hover text { fill: #1d4ed8; }

/* Cuando el «+» manda al campo del nombre, el campo avisa de que le toca a él. */
#co-root .co-flash { animation: co-flash 1.1s ease-out 2; }
@keyframes co-flash {
  0%   { box-shadow: 0 0 0 0 rgb(37 99 235 / .35); border-color: #2563eb; }
  100% { box-shadow: 0 0 0 8px rgb(37 99 235 / 0); border-color: #e2e8f0; }
}

#co-root .co-n--sub.co-n--open circle { stroke: #0f172a; stroke-width: 3.5; }
#co-root .co-n--root.co-n--open circle { stroke: #2563eb; stroke-width: 3.5; }
#co-root .co-n--open .co-lbl { fill: #0f172a; font-weight: 800; }

/* ── La tarjeta que abre un nodo ── */
/* La tarjeta del nodo abierto vive en la franja de arriba, pegada a la leyenda: es la respuesta al
   clic y se lee antes del dibujo, en vez de empujar la tabla hacia abajo. */
#co-root .co-scopecard {
  margin: 0 0.875rem 0.625rem; padding: 0.625rem 0.75rem;
  background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #2563eb;
  border-radius: 0.5rem; font-size: 0.8125rem;
}
#co-root .co-scopecard-head {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 0.5rem; color: #0f172a; line-height: 1.5;
}
#co-root .co-scopecard-acts { margin-left: auto; display: flex; gap: 0.375rem; }
/* ── Elegir destinatario al soltar un lote ─────────────────────────────────────────────────────
   Radios en filas pulsables enteras: el objetivo es el renglón, no el círculo de 13 px. */
#co-root .co-who { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.5rem 0 0.25rem; }
#co-root .co-who-op {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 0.625rem; border: 1px solid #e2e8f0; border-radius: 0.5rem;
  background: #fff; cursor: pointer; font-size: 0.8125rem;
}
#co-root .co-who-op:hover { background: #f8fafc; border-color: #cbd5e1; }
#co-root .co-who-op:has(input:checked) { border-color: #93c5fd; background: #eff6ff; }
#co-root .co-who-op input { min-height: 0; width: 1rem; height: 1rem; accent-color: #2563eb; margin: 0; }
#co-root .co-who-mail { color: #0f172a; font-weight: 600; }
/* «Crear una persona nueva» va suelta y con borde discontinuo: no es uno más de la lista, es otra
   cosa — abre un campo y añade un paso más al plan. */
#co-root .co-who-op--new { margin-top: 0.5rem; border-style: dashed; }

#co-root .co-whoin { list-style: none; margin: 0; padding: 0; }
#co-root .co-whoin li {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.25rem 0; border-bottom: 1px solid rgb(226 232 240 / .6);
}
#co-root .co-whoin li:last-child { border-bottom: none; }
#co-root .co-whoin-mail { color: #0f172a; font-weight: 600; }
/* Botón de línea: acompaña a un texto, no es un control de página. */
#co-root button.co-mini {
  min-height: 0; padding: 0.1875rem 0.5rem; border-radius: 0.375rem;
  font-size: 0.75rem; font-weight: 600; color: #1d4ed8;
  background: #fff; border-color: #bfdbfe;
}
#co-root button.co-mini:hover { background: #eff6ff; border-color: #93c5fd; }
#co-root .co-ghint { color: #94a3b8; font-style: italic; }

/* Franja de arriba del recuadro del grafo: leyenda y, cuando hay un nodo abierto, su tarjeta. Va
   ENCIMA del dibujo para que el borde de abajo del recuadro quede pegado a la lista de tags. */
#co-root .co-gtop { border-bottom: 1px solid #f1f5f9; }
#co-root .co-glegend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem;
  padding: 0.4375rem 0.875rem;
  font-size: 0.75rem; color: #64748b;
}
/* El número, explicado al lado de los puntos: un círculo de muestra con una cifra dentro, igual que
   los del dibujo. Preguntarse «¿y el número qué es?» se resuelve en el mismo renglón. */
#co-root .co-glegend .lg-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.125rem; height: 1.125rem; margin-right: -0.625rem;
  border-radius: 9999px; background: #2563eb; color: #fff;
  font-size: 0.625rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
#co-root .co-glegend .lg {
  width: 0.6rem; height: 0.6rem; border-radius: 9999px; margin-right: 0.25rem;
  display: inline-block; vertical-align: -1px;
}
#co-root .co-glegend .lg.root { background: #0f172a; }
#co-root .co-glegend .lg.sub  { background: #2563eb; }
#co-root .co-glegend .lg.pend { background: #fff; border: 1.5px dashed #94a3b8; }

/* ── Estructura (lista org → sub-orgs) ── */
#co-root .co-structure { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.9; }
#co-root .co-structure > div { color: #0f172a; }
/* Sangría de las hijas de la organización raíz. La jerarquía sólo tiene este nivel. */
#co-root .co-tree-1 { margin-left: 1.4rem; }
/* La lista en texto de la organización y sus hijas. Vivía pegada al grafo; ahora acompaña a las
   personas en §2, porque de eso habla su botón, y así debajo del dibujo cae la selección de tags. */
#co-root .co-orglist { font-size: 0.8125rem; line-height: 1.7; margin-bottom: 0.625rem; }
/* De quién es hija, en texto: la sangría sola no sobrevive a una captura ni a leer en diagonal. */
#co-root .co-of { color: #94a3b8; font-size: 0.75rem; font-weight: 400; }

/* La lista de hijas en texto, plegada por defecto: con muchas sub-organizaciones repetía renglón por
   renglón lo que el organigrama ya enseña de un vistazo. Sigue siendo el mismo texto copiable y con
   lector de pantalla de siempre — sólo hay que abrirlo. */
#co-root .co-treefold { margin-top: 0.375rem; }
#co-root .co-treefold > summary {
  cursor: pointer; list-style: none; color: #64748b; font-size: 0.8125rem;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
#co-root .co-treefold > summary::-webkit-details-marker { display: none; }
/* Flechita a mano, para no depender del marcador nativo del navegador (varía entre triángulo y
   disclosure-widget según el motor, y así se ve igual en todos). */
#co-root .co-treefold > summary::before { content: '▸'; font-size: 0.7em; color: #94a3b8; }
#co-root .co-treefold[open] > summary::before { content: '▾'; }
#co-root .co-treefold > summary:hover { color: #334155; }

/* «Qué puede cada quien», cerrado por defecto: la sección más larga de la página (una fila por
   persona), que no hace falta tener siempre a la vista. Más prominente que .co-treefold porque aquí
   se pliega una tarjeta entera, no un renglón suelto — el resumen se lee como un botón, no como una
   nota al margen. */
#co-root .co-fold > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 0.75rem; margin: -0.125rem 0 0;
  border: 1px solid #e2e8f0; border-radius: 0.5rem;
  background: #f8fafc; color: #334155; font-size: 0.8125rem; font-weight: 600;
}
#co-root .co-fold > summary::-webkit-details-marker { display: none; }
#co-root .co-fold > summary::before { content: '▸'; font-size: 0.7em; color: #64748b; }
#co-root .co-fold[open] > summary::before { content: '▾'; }
#co-root .co-fold > summary:hover { background: #f1f5f9; border-color: #cbd5e1; }
#co-root .co-fold > summary:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
#co-root .co-fold > *:not(summary) { margin-top: 0.75rem; }
#co-root .co-fold[open] > summary { border-radius: 0.5rem 0.5rem 0 0; margin-bottom: -0.75rem; }

/* ── KPIs de la organización cargada ── */
#co-root .kpi {
  display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.75rem;
  font-size: 0.8125rem; color: #64748b;
}
#co-root .kpi b { color: #0f172a; font-variant-numeric: tabular-nums; }

/* ── Consecuencias de mover un tag ── */
#co-root .conseq {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 0.75rem; padding: 1rem; margin-top: 0.75rem;
  font-size: 0.875rem; line-height: 1.625;
}
#co-root .conseq h3 { font-size: 0.9375rem; font-weight: 700; color: #0f172a; margin: 0 0 0.5rem; }
#co-root .conseq ul { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; }
#co-root .conseq li { margin: 0.3125rem 0; }
#co-root .tag-gain { color: #047857; font-weight: 600; }
#co-root .tag-lose { color: #dc2626; font-weight: 600; }
#co-root .tag-same { color: #64748b; font-weight: 600; }
#co-root .after {
  background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #2563eb;
  border-radius: 0.5rem; padding: 0.75rem 0.875rem; margin: 0.75rem 0 0.25rem;
}
#co-root .after .none { color: #dc2626; font-weight: 600; }
#co-root .co-after-row { margin-top: 0.375rem; }

/* ── Mensajes de estado en línea ── */
#co-root .co-msg { font-size: 0.8125rem; line-height: 1.625; margin-top: 0.5rem; }
#co-root .co-msg--err { color: #dc2626; }
#co-root .co-msg--ok { color: #047857; }

/* ── §3 · lo que el servidor promete escribir (/macros/resource-plan) ──────────────────────────
   Un recuadro por alta. No es texto de ayuda: es la respuesta del servidor, así que no lleva .hint
   —el interruptor «ocultar ayuda» de docs borra p.hint entero— y se queda siempre a la vista. */
/* `display:flex` de .co-row le gana al `hidden` del navegador: sin esto la fila se ve siempre. */
#co-root .co-row[hidden] { display: none; }
#co-root .co-prev {
  background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #2563eb;
  border-radius: 0.75rem; padding: 0.75rem 0.875rem; margin: 0.5rem 0;
  font-size: 0.8125rem; line-height: 1.625;
}
#co-root .co-prev > div { margin: 0.125rem 0; }
#co-root .co-prev--err { border-left-color: #dc2626; }
#co-root .co-changes { margin: 0.25rem 0; padding-left: 1.25rem; }
#co-root .co-changes li { margin: 0.125rem 0; }

/* ── Secciones 1-5: bloqueadas hasta que haya una organización cargada ── */
#co-root .locked { opacity: 0.45; pointer-events: none; }

/* ── Bitácora de «Aplicar» ── */
#co-root .co-log {
  display: none; margin: 0.75rem 0 0; max-height: 260px; overflow: auto;
  background: #0f172a; color: #e2e8f0;
  padding: 0.75rem 0.875rem; border-radius: 0.5rem; white-space: pre-wrap;
  font: 0.75rem/1.6 'Menlo', 'Monaco', 'Consolas', monospace;
}
#co-root .co-log-ok { color: #6ee7b7; }
#co-root .co-log-err { color: #fca5a5; }
#co-root .co-log-dim { color: #94a3b8; }

/* ── Móvil: los controles dejan de competir por el ancho ── */
@media (max-width: 640px) {
  #co-root .co-prod { padding: 0.875rem; border-radius: 0.75rem; }
  #co-root .co-card { padding: 1rem; }
  #co-root .co-row { gap: 0.5rem; }
  #co-root .co-row > input,
  #co-root .co-row > select,
  #co-root .co-row > button,
  #co-root .co-row > label { width: 100%; }
  #co-root .co-row > label input,
  #co-root .co-row > label select { flex: 1; min-width: 0; }
}

/* Los dos roles de una sub-organización, en §2. Lista y no párrafo: son dos
   opciones que se comparan, y en corrido hay que leerlas dos veces. */
#co-root .co-roles {
  list-style: none; margin: 0 0 0.75rem; padding: 0;
  font-size: 0.8125rem; line-height: 1.625; color: #64748b;
}
#co-root .co-roles li { margin: 0.1875rem 0; padding-left: 0.875rem; text-indent: -0.875rem; }
#co-root .co-roles li::before { content: '·'; margin-right: 0.375rem; color: #94a3b8; }

/* ── §1 · arrastrar lo marcado hasta un subgrupo ──────────────────────────────────────────
   El gesto es un adorno del camino que ya existía: las zonas hacen lo mismo que «+ añadir al plan»
   y son <div role="button" tabindex="0">, así que responden a Enter igual que al puntero. Por eso
   cada zona dice en palabras cuántos tags se moverían — el color y el movimiento sólo acompañan, y
   la tarjeta se lee igual en escala de grises o con las animaciones apagadas. */
#co-root .co-zones { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.5rem 0 0.25rem; }
/* Un renglón por destino, no una tarjeta: con seis sub-organizaciones las tarjetas ocupaban dos filas
   y empujaban la tabla fuera de la pantalla. El blanco sigue siendo cómodo (min-height 2.5rem). */
#co-root .co-zone {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.5rem;
  background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 0.5rem;
  padding: 0.3125rem 0.625rem; cursor: pointer; max-width: 100%;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}
#co-root .co-zone:hover { border-color: #94a3b8; background: #f1f5f9; }
#co-root .co-zone:focus-visible { outline: none; border-color: #93c5fd; box-shadow: 0 0 0 3px rgb(59 130 246 / .10); }
#co-root .co-zone-name {
  font-size: 0.8125rem; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem;
}
/* Cuántos viven ahí: pastilla de número, para que el renglón se lea de un vistazo. */
#co-root .co-zone-n {
  font-size: 0.6875rem; font-weight: 700; color: #475569;
  background: #e2e8f0; border-radius: 9999px; padding: 0.0625rem 0.375rem;
  font-variant-numeric: tabular-nums;
}
#co-root .co-zone-drop { font-size: 0.75rem; font-weight: 700; color: #1d4ed8; }
#co-root .co-zone--sub .co-zone-name { color: #1d4ed8; }

/* Los dos desplegables se cortan antes de estirarse con un nombre largo, para que el destino, la
   persona y el botón quepan en un solo renglón en vez de tres. */
#co-root #movDest,
#co-root #movUser { max-width: 14rem; }
/* El destino que además está elegido en el desplegable: gesto y control preciso, lo mismo. */
#co-root .co-zone.is-dest { border-style: solid; border-color: #bfdbfe; background: #eff6ff; }
#co-root .co-zone.is-dest .co-zone-drop { color: #1d4ed8; }

/* Mientras se arrastra, los destinos respiran para decir que son sitios donde soltar. */
#co-root .co-zone.is-armed { border-color: #93c5fd; animation: co-breathe 1.6s ease-in-out infinite; }
#co-root .co-zone.is-over {
  border-style: solid; border-color: #2563eb; background: #eff6ff;
  transform: translateY(-3px); box-shadow: 0 8px 20px rgb(37 99 235 / .18);
  animation: none;
}
#co-root .co-zone.is-over .co-zone-drop { color: #1d4ed8; }
#co-root .co-zone.is-done { animation: co-done 0.7s ease-out; }
#co-root .co-zone.is-nope { animation: co-nope 0.4s ease-in-out; }
#co-root .co-zonemsg--ok { color: #047857; }
#co-root .co-zonemsg--nope { color: #b45309; }

/* La burbuja: lo marcado, hecho un objeto que se puede agarrar. En reposo se apoya en la esquina
   inferior derecha de la TABLA —donde acabas de marcar, no en una esquina de la pantalla— y cabecea
   despacio hacia arriba, que es donde están los nodos a los que va. Al arrastrarla pasa a fixed y la
   coloca el JS con left/top. */
#co-root #tagsWrap { position: relative; }
#co-root .co-bubble {
  position: absolute; right: 1rem; bottom: 0.75rem; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.0625rem; width: 4.75rem; height: 4.75rem; padding: 0.25rem;
  border-radius: 9999px; border: 1px solid #1d4ed8;
  background: radial-gradient(circle at 32% 28%, #60a5fa, #2563eb 70%);
  color: #fff; text-align: center; cursor: grab;
  box-shadow: 0 8px 20px rgb(37 99 235 / .35), 0 0 0 4px rgb(37 99 235 / .12);
  animation: co-pop 0.32s cubic-bezier(.34, 1.56, .64, 1),
             co-nudge 2.4s ease-in-out 0.4s infinite;
  /* En táctil el arrastre es del dedo, no del scroll de la página. */
  touch-action: none; user-select: none;
}
#co-root .co-bubble[hidden] { display: none; }
/* Tabla fuera de la pantalla: la burbuja se ancla a la esquina de la ventana en vez de irse con ella. */
#co-root .co-bubble.is-docked { position: fixed; right: 1.25rem; bottom: 1.25rem; }
#co-root .co-bubble-n { font-size: 1.375rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
#co-root .co-bubble-t { font-size: 0.5625rem; font-weight: 600; line-height: 1.2; opacity: .9; }
#co-root .co-bubble-t b { font-size: 0.75rem; }
#co-root .co-bubble.is-bump .co-bubble-n { animation: co-bump 0.3s ease-out; }
/* Al arrastrar, la burbuja va abajo-derecha del puntero y NO centrada en él: centrada tapaba el
   nodo del organigrama —26 px contra 88 px de burbuja— y no se veía sobre cuál estabas soltando. */
#co-root .co-bubble.is-dragging {
  position: fixed; right: auto; bottom: auto; cursor: grabbing;
  transform: translate(0.75rem, 0.75rem) scale(1.02) rotate(-3deg);
  box-shadow: 0 16px 34px rgb(37 99 235 / .45);
  animation: none; pointer-events: none;   /* así elementFromPoint ve el destino, no la burbuja */
}
/* Al soltar sobre una zona, la burbuja se apoya en ella y desaparece ahí mismo. */
#co-root .co-bubble.is-landing {
  transition: left 0.26s ease-in, top 0.26s ease-in, transform 0.26s ease-in, opacity 0.26s ease-in;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
}
/* Fuera de arrastre la burbuja vuelve sola a la esquina. */
#co-root .co-bubble:not(.is-dragging):not(.is-landing) { transition: transform 0.2s ease-out; }

/* ── Los nodos del organigrama, como destinos ──────────────────────────────────────────────────
   Soltar la burbuja en el nodo del organigrama y soltarla en la tarjeta de §1 son el mismo gesto,
   así que
   tienen que responder igual: aviso de que ahí se puede soltar, resalte al pasar por encima,
   destello al aceptar y sacudida cuando no hay nada que mover. Lo que cambia es el vocabulario, que
   aquí es de SVG — stroke y transform en vez de border y box-shadow.

   El clic en un nodo sigue siendo «enséñame quién está dentro»: mover es soltar, no pulsar. */
#co-root .co-n.is-armed circle {
  stroke: #93c5fd; stroke-width: 4;
  animation: co-breathe-node 1.6s ease-in-out infinite;
}
#co-root .co-n.is-over circle {
  stroke: #1d4ed8; stroke-width: 5; animation: none;
}
#co-root .co-n--sub.is-over circle { fill: #1d4ed8; }
#co-root .co-n--root.is-over circle { fill: #1e293b; }
#co-root .co-n.is-over .co-lbl { font-weight: 800; }
#co-root .co-n.is-done circle { animation: co-done-node 0.7s ease-out; }
#co-root .co-n.is-nope { animation: co-nope-node 0.4s ease-in-out; }

/* Las curvas y el texto no deben robar el puntero: el blanco de soltado es el <rect class="co-hit">
   de cada nodo, que es lo que elementFromPoint tiene que encontrar. */
#co-root .co-graph .co-edges { pointer-events: none; }

@keyframes co-breathe-node {
  0%, 100% { stroke: #bfdbfe; }
  50%      { stroke: #2563eb; }
}
@keyframes co-done-node {
  0%   { stroke: #10b981; stroke-width: 9; }
  100% { stroke: #fff; stroke-width: 2.5; }
}
@keyframes co-nope-node {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ── Deshacer: devolver la burbuja a su caja ───────────────────────────────────────────────────
   El último movimiento se puede quitar desde §4 fila a fila, pero al ojo le queda lejos del gesto que
   acaba de hacer. Dos caminos para lo mismo: el botón «↩ deshacer» del acuse y soltar la burbuja de
   vuelta en la tabla de la que salió. La caja sólo se ofrece cuando hay algo que devolver. */
#co-root .co-undo {
  min-height: 0; margin-left: 0.375rem; padding: 0.0625rem 0.4375rem;
  border-radius: 0.375rem; border: 1px solid #a7f3d0; background: #fff;
  font-size: 0.75rem; font-weight: 700; color: #047857;
}
#co-root .co-undo:hover { background: #ecfdf5; border-color: #6ee7b7; }
/* Mismo tamaño de botón-de-línea, pero en azul: éste no deshace, abre otra vez el diálogo. */
#co-root .co-again { border-color: #bfdbfe; color: #1d4ed8; }
#co-root .co-again:hover { background: #eff6ff; border-color: #93c5fd; }

#co-root #tagsWrap.is-undoable {
  outline: 2px dashed #94a3b8; outline-offset: 3px; border-radius: 0.75rem;
}
#co-root #tagsWrap.is-undoable::after {
  content: 'suelta el globito aquí para devolver sus tags';
  position: absolute; left: 50%; top: -0.75rem; transform: translateX(-50%);
  padding: 0.0625rem 0.5rem; border-radius: 9999px;
  background: #475569; color: #fff; font-size: 0.6875rem; font-weight: 700;
  white-space: nowrap; pointer-events: none; z-index: 61;
}
#co-root #tagsWrap.is-undoable.is-over {
  outline-color: #0f172a; outline-style: solid; background: rgb(148 163 184 / .10);
}

/* Las filas de la tabla se agarran, y mientras se arrastra nada de la página selecciona texto. */
#co-root .co-taglist tbody tr[data-drag] { cursor: grab; }
body.co-dragging { cursor: grabbing; user-select: none; }

@keyframes co-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes co-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
/* Cabeceo hacia arriba: dos píxeles, lo justo para que el ojo la lea como «me puedes llevar». */
@keyframes co-nudge {
  0%, 88%, 100% { translate: 0 0; }
  92%           { translate: 0 -4px; }
  96%           { translate: 0 -1px; }
}
/* Los destinos, al aparecer la burbuja: tres pulsos y se callan. */
#co-root .co-zone.is-invite { animation: co-invite-zone 0.8s ease-out 3; }
#co-root .co-n.is-invite circle { animation: co-invite-node 0.8s ease-out 3; }
@keyframes co-invite-zone {
  0%   { border-color: #cbd5e1; box-shadow: 0 0 0 0 rgb(37 99 235 / .28); }
  60%  { border-color: #2563eb; box-shadow: 0 0 0 6px rgb(37 99 235 / 0); }
  100% { border-color: #cbd5e1; box-shadow: 0 0 0 0 rgb(37 99 235 / 0); }
}
@keyframes co-invite-node {
  0%   { stroke: #fff; stroke-width: 2.5; }
  55%  { stroke: #93c5fd; stroke-width: 7; }
  100% { stroke: #fff; stroke-width: 2.5; }
}

@keyframes co-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgb(37 99 235 / .00); }
  50%      { box-shadow: 0 0 0 5px rgb(37 99 235 / .12); }
}
@keyframes co-done {
  0%   { box-shadow: 0 0 0 0 rgb(5 150 105 / .45); border-color: #10b981; background: #ecfdf5; }
  100% { box-shadow: 0 0 0 16px rgb(5 150 105 / 0); }
}
@keyframes co-nope {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* Quien pidió menos movimiento se queda con toda la información: el color y el texto siguen ahí, y
   la burbuja continúa siendo arrastrable — sólo desaparecen los recorridos animados. */
@media (prefers-reduced-motion: reduce) {
  #co-root .co-zone,
  #co-root .co-zone.is-armed,
  #co-root .co-zone.is-done,
  #co-root .co-zone.is-nope,
  #co-root .co-bubble,
  #co-root .co-bubble.is-bump .co-bubble-n,
  #co-root .co-bubble.is-landing { animation: none; transition: none; }
  #co-root .co-zone.is-over { transform: none; }
  #co-root .co-n.is-armed circle,
  #co-root .co-n.is-done circle,
  #co-root .co-n.is-nope,
  #co-root .co-n.is-invite circle,
  #co-root .co-zone.is-invite,
  #co-root .co-flash,
  #co-root .co-needp circle,
  #co-root .co-needp-t { animation: none; }
  /* Sin latido, el aviso sigue leyéndose: el texto y el color ámbar no dependen del movimiento. */
  #co-root .co-needp circle { stroke-width: 2.5; }
  #co-root .co-bubble.is-dragging { transform: translate(0.75rem, 0.75rem); }
  #co-root .co-bubble.is-landing { opacity: 0; }
}

/* Móvil: los destinos en columna y la burbuja algo menor, para no tapar la tabla. */
@media (max-width: 640px) {
  #co-root .co-zone { flex: 1 1 100%; }
  #co-root .co-bubble { width: 4rem; height: 4rem; right: 0.625rem; bottom: 0.5rem; }
  #co-root .co-bubble-n { font-size: 1.25rem; }
}

/* ── El diálogo de «+ persona aquí» ────────────────────────────────────────────────────────────
   <dialog> nativo, con los mismos tokens que el resto del panel. Se queda abierto tras cada alta y
   va listando lo apuntado: a una sub-organización recién creada casi nunca se le pone una sola
   persona, y cerrar y volver a abrir por cada correo era el trabajo de verdad.
   Del navegador vienen gratis: Esc para cerrar, el foco atrapado dentro y el fondo inerte. */
#co-root .co-dlg {
  border: 1px solid #e2e8f0; border-radius: 0.875rem; padding: 0;
  width: min(26rem, calc(100vw - 2rem));
  background: #fff; color: #475569;
  box-shadow: 0 24px 48px -12px rgb(15 23 42 / .25);
}
#co-root .co-dlg::backdrop { background: rgb(15 23 42 / .45); backdrop-filter: blur(2px); }
#co-root .co-dlg[open] { animation: co-dlg-in 0.18s ease-out; }
#co-root .co-dlg form { padding: 1.125rem 1.25rem 1rem; }
#co-root .co-dlg-title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 700; color: #0f172a; }
#co-root .co-dlg-sub { margin: 0 0 0.875rem; font-size: 0.8125rem; line-height: 1.5; color: #64748b; }
#co-root .co-dlg-field {
  display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.625rem;
  font-size: 0.8125rem; font-weight: 600; color: #334155;
}
/* Sin esto, [hidden] pierde contra el display:flex de arriba: mismo peso de especificidad, y el
   flex está declarado después en la cascada. El campo de correo se quedaba visible aunque JS le
   pusiera el atributo. */
#co-root .co-dlg-field[hidden] { display: none; }
#co-root .co-dlg-field > input,
#co-root .co-dlg-field > select { width: 100%; max-width: none; font-weight: 400; }
#co-root .co-dlg-hint { margin: -0.25rem 0 0.75rem; font-size: 0.75rem; line-height: 1.5; color: #64748b; }
#co-root .co-dlg-err {
  margin: 0 0 0.625rem; padding: 0.4375rem 0.625rem; border-radius: 0.5rem;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  font-size: 0.75rem; font-weight: 600;
}
/* Lo ya apuntado para esta organización, dentro del propio diálogo: el acuse de que va entrando. */
#co-root .co-dlg-added {
  margin: 0 0 0.75rem; padding: 0.5rem 0.625rem;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem;
}
#co-root .co-dlg-added-lbl { font-size: 0.6875rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
#co-root .co-dlg-added ul { list-style: none; margin: 0.25rem 0 0; padding: 0; }
#co-root .co-dlg-added li {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0;
  font-size: 0.8125rem; animation: co-dlg-row 0.25s ease-out;
}
#co-root .co-dlg-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
#co-root .co-dlg-foot { margin: 0.625rem 0 0; font-size: 0.6875rem; color: #94a3b8; text-align: right; }

@keyframes co-dlg-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes co-dlg-row {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #co-root .co-dlg[open],
  #co-root .co-dlg-added li { animation: none; }
}