/* ── 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 §4 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: 1.25rem; margin: 0 0 1rem;
}
/* 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.625rem; flex-wrap: wrap; align-items: center; margin: 0.5rem 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.625rem 0.75rem; font-weight: 700; color: #0f172a;
  border-bottom: 1px solid #e2e8f0; vertical-align: middle;
}
#co-root td {
  padding: 0.625rem 0.75rem; 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 §4 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; }

/* ── §3 · 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
   secciones 4-6 se quedan a un dedo de distancia por muchos tags que haya. */
#co-root .co-taglist {
  max-height: 24rem; 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;
}
/* La barra de filtros: el buscador se lleva el espacio sobrante, los botones sólo lo suyo. */
#co-root .co-tagbar { margin-top: 0.25rem; }
#co-root .co-tagbar > #tagQ { flex: 1 1 12rem; min-width: 0; }
#co-root .pill.pend {
  background: #fffbeb; border-color: #fde68a; color: #b45309;
}

/* ── §4 · 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.625; margin-bottom: 0.75rem; }
#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.75rem; padding: 0.5rem 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 §2 fuera de la pantalla. */
#co-root .co-gviewport { max-height: 30rem; 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; }
/* 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; }
/* 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. */
#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 ── */
#co-root .co-scopecard {
  margin: 0.25rem 0.875rem 0.75rem; padding: 0.75rem 0.875rem;
  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; }
#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; }

#co-root .co-glegend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1rem;
  padding: 0.5rem 0.875rem 0.25rem;
  font-size: 0.75rem; color: #64748b;
}
#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; }
/* 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; }

/* ── 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; }

/* ── 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; }