/* Hub: escena radial, ventanas de escritorio y panel de administración.
   Tokens, controles y botones base viven en tokens.css. */
:root {
  --centro-d: 220px;
  --nodo-d: 128px;
  --banner-h: 0px; /* la mide app.js: el banner de demo puede ocupar 1 o 2 líneas */
}

html, body {
  height: 100%;
  overflow: hidden;
}
body { font-size: var(--fs-base); }

/* ---------- loader (átomo) ---------- */
.loader {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  background: radial-gradient(ellipse at 50% 42%, var(--fondo2), var(--fondo1) 75%);
  transition: opacity 0.4s ease;
}
.loader.done { opacity: 0; pointer-events: none; }

.atom { position: relative; width: 150px; height: 150px; }

.nucleus {
  position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, white, var(--acento) 55%, color-mix(in srgb, var(--acento) 40%, black));
}

.orbit { position: absolute; inset: 0; }
.orbit::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
  border-radius: 50%;
}
.orbit.o1 { transform: rotate(0deg) scaleY(0.36); }
.orbit.o2 { transform: rotate(60deg) scaleY(0.36); }
.orbit.o3 { transform: rotate(-60deg) scaleY(0.36); }

.e-track { position: absolute; inset: 0; animation: e-spin 1.7s linear infinite; }
.orbit.o2 .e-track { animation-duration: 2.3s; animation-direction: reverse; }
.orbit.o3 .e-track { animation-duration: 2.9s; }
@keyframes e-spin { to { transform: rotate(360deg); } }

.electron {
  position: absolute; top: -4px; left: 50%;
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--texto);
}

.loader-label {
  font-weight: 600; font-size: var(--fs-base);
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}

/* la escena y la lista quedan ocultas hasta que el primer layout está listo */
.scene, .list-view { opacity: 0; }
body.ready .scene, body.ready .list-view {
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* ---------- login ---------- */
.login {
  position: fixed; inset: 0;
  z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 42%, var(--fondo2), var(--fondo1) 75%);
}
.login-card {
  display: flex; flex-direction: column; gap: 14px;
  width: min(380px, 100%);
  padding: 36px 32px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
  box-shadow: var(--sombra-2);
  animation: win-in 0.35s var(--ease-out) both;
}
.login-card .campo { flex: 0 0 auto; }
.login-mark {
  width: 14px; height: 14px; border-radius: 50%;
  margin: 0 auto 2px;
  background: var(--acento);
}
.login-title {
  font-weight: 800; font-size: var(--fs-lg);
  text-align: center; letter-spacing: 0.01em;
  text-wrap: balance;
}
.login-sub {
  font-size: var(--fs-base); text-align: center;
  color: var(--texto-suave);
  margin-bottom: 8px;
}
.login-error {
  min-height: 1.3em;
  font-size: var(--fs-sm); text-align: center;
  color: var(--error);
}
.login-error.exito { color: var(--ok); }
.login-texto {
  font-size: var(--fs-base); color: var(--texto-suave);
  text-align: center; line-height: 1.55;
  margin: -6px 0 4px;
}
.link-btn {
  font-family: inherit; font-size: var(--fs-sm);
  color: var(--texto-suave);
  background: none; border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px;
  align-self: center;
  border-radius: 6px;
}
.link-btn:hover { color: var(--acento-texto); }

/* ---------- iconos topbar + popover perfil ---------- */
.topbar-actions { display: flex; gap: 10px; }
.icon-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-suave);
  cursor: pointer;
  display: grid; place-items: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] {
  color: var(--texto);
  border-color: var(--acento-borde);
  background: var(--superficie-alta);
}

.popover {
  position: fixed;
  top: calc(var(--banner-h) + 68px); right: 22px;
  z-index: 500;
  width: min(280px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra-2);
  animation: win-in 0.22s var(--ease-out) both;
}
.pop-nombre { font-weight: 700; font-size: var(--fs-md); }
.pop-user { font-size: var(--fs-sm); color: var(--texto-suave); margin-top: -8px; overflow-wrap: anywhere; }
.pop-sep { height: 1px; background: var(--borde); }
.pop-form { display: flex; flex-direction: column; gap: 10px; }
.pop-form .campo { flex: 0 0 auto; }

/* ---------- panel admin ---------- */
.admin-panel {
  position: absolute; inset: 0;
  overflow: hidden;
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.admin-cont {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 2px 6px 2px 2px; /* aire para que el anillo de foco no se recorte */
}

.admin-tabs {
  display: flex; gap: 6px; flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
  margin: -2px;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
  flex: 0 0 auto;
  font-family: inherit; font-size: var(--fs-base); font-weight: 600;
  white-space: nowrap;
  padding: 9px 15px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.admin-tab:hover { color: var(--texto); background: var(--relleno); }
.admin-tab[aria-selected="true"] {
  color: var(--texto);
  background: var(--relleno);
  border-color: var(--acento-borde);
}

.marca-titulo {
  font-size: var(--fs-base); font-weight: 700;
  color: var(--acento-texto);
  margin-top: 8px;
}
.marca-titulo.con-icono { display: flex; align-items: center; gap: 8px; }
.marca-titulo.con-icono .marca-icon { width: 20px; height: 20px; font-size: 0.625rem; }

/* íconos de marca: logo o monograma de color */
.marca-icon {
  width: 28px; height: 28px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-block;
}
.marca-icon.mono {
  display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--mc, var(--acento)) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc, var(--acento)) 55%, transparent);
  color: color-mix(in srgb, var(--mc, var(--acento)) 75%, var(--texto));
  font-weight: 700; font-size: 0.625rem;
  letter-spacing: 0.04em;
}
.marca-icon.grande { width: 40px; height: 40px; border-radius: 12px; }
.marca-icon.mono.grande { font-size: var(--fs-base); }

input[type="color"] {
  width: 48px; height: 40px;
  padding: 4px;
  flex: 0 0 auto;
  cursor: pointer;
}

/* selector de marca con íconos (listbox) */
.dd { position: relative; }
.dd-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: 40px;
  font-family: inherit; font-size: var(--fs-base);
  color: var(--texto);
  background: var(--relleno);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 6px 13px;
  cursor: pointer;
}
.dd-btn:hover { border-color: color-mix(in srgb, var(--texto) 24%, transparent); }
.dd-flecha { margin-left: auto; width: 14px; height: 14px; color: var(--texto-suave); transition: transform 0.2s var(--ease-out); }
.dd-btn[aria-expanded="true"] .dd-flecha { transform: rotate(180deg); }
.dd-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 30;
  max-height: 220px; overflow-y: auto;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--sombra-2);
}
.dd-item {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-base);
  color: var(--texto);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.dd-item:hover, .dd-item:focus-visible { background: var(--relleno-hover); }
.dd-item[aria-selected="true"] { background: var(--relleno); font-weight: 600; }

.admin-vacio { color: var(--texto-suave); font-size: var(--fs-base); padding: 8px 2px; line-height: 1.5; }
.admin-nota { color: var(--texto-suave); font-size: var(--fs-sm); margin: -4px 0 6px; line-height: 1.55; max-width: 70ch; }
.user-row.inactiva .u-info { opacity: 0.6; }

.btn-generar { flex: 0 0 auto; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-head h2 { font-size: var(--fs-md); font-weight: 700; }

.user-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  background: var(--relleno);
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.user-row .u-nombre { font-weight: 600; }
.user-row .u-user { color: var(--texto-suave); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.user-row .u-info { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.user-badge {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 99px;
  border: 1px solid var(--acento-borde);
  color: var(--acento-texto);
  white-space: nowrap;
}
.user-badge.limitado { border-color: color-mix(in srgb, var(--texto-suave) 45%, transparent); color: var(--texto-suave); }
.btn-mini {
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: 7px 12px;
  min-height: 32px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--relleno);
  color: var(--texto); cursor: pointer;
  transition: background 0.2s;
}
.btn-mini:hover { background: var(--relleno-hover); }

.admin-form { display: flex; flex-direction: column; gap: 12px; }
.admin-form .fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.admin-form label.check {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-base); color: var(--texto);
  cursor: pointer; user-select: none;
  min-height: 28px;
}
.admin-form .acciones {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
  /* siempre a la vista: Guardar no queda bajo el fold en formularios largos */
  position: sticky; bottom: -2px; z-index: 4;
  margin-top: auto;
  padding: 12px 0 4px;
  background: var(--superficie);
  border-top: 1px solid var(--borde-suave);
}
.admin-form .acciones .espacio { flex: 1; }
.admin-error { color: var(--error); font-size: var(--fs-sm); min-height: 1.2em; }

.perm-titulo {
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--texto);
  margin-top: 6px;
}
.perm-titulo small { display: block; font-size: inherit; font-weight: 400; color: var(--texto-suave); margin-top: 2px; line-height: 1.5; }

/* matriz marca × menú en el editor de usuario */
/* Un solo scroll: el del panel. La matriz no scrollea por su cuenta, así que su
   encabezado (sticky) queda pegado arriba del panel mientras se recorre la lista.
   Solo si hay tantas marcas que no entran a lo ancho (.ancha, la pone app.js)
   gana scroll horizontal, con la columna de menús fija. */
.matriz-wrap {
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.matriz-wrap.ancha { overflow-x: auto; }
.matriz-wrap:not(.ancha) .matriz thead th:first-child { border-top-left-radius: 11px; }
.matriz-wrap:not(.ancha) .matriz thead th:last-child { border-top-right-radius: 11px; }
.matriz-wrap:not(.ancha) .matriz tbody tr:last-child th { border-bottom-left-radius: 11px; }
.mz-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mz-copiar { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--texto-suave); }
.mz-copiar select { padding: 6px 10px; min-height: 34px; font-size: var(--fs-sm); }
.admin-todo {
  padding: 14px 16px;
  border: 1px solid var(--acento-borde);
  border-radius: 12px;
  background: color-mix(in srgb, var(--acento) 8%, transparent);
  color: var(--texto-suave);
  line-height: 1.55;
}
.admin-todo strong { display: block; color: var(--texto); }
.matriz { border-collapse: collapse; width: 100%; font-size: var(--fs-base); }
.matriz thead th {
  position: sticky; top: -2px;
  background: var(--superficie-alta);
  padding: 10px 12px 8px;
  text-align: center;
  font-weight: 600;
  z-index: 2;
  border-bottom: 1px solid var(--borde);
}
.matriz thead th .marca-icon { width: 24px; height: 24px; font-size: 0.625rem; margin: 0 auto; display: block; }
.mz-marca {
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--texto);
  margin: 5px auto 0;
  min-width: 84px; max-width: 150px;
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.matriz thead th { vertical-align: bottom; }
.mz-todo {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--texto-suave);
  cursor: pointer;
}
.matriz .mz-todas { border-right: 1px solid var(--borde-suave); }
.matriz thead .mz-todas .mz-marca { color: var(--texto-suave); font-weight: 500; }
.matriz tbody th, .matriz td { padding: 7px 12px; border-bottom: 1px solid var(--borde-suave); }
.matriz tbody tr:last-child > * { border-bottom: none; }
.matriz tbody tr:hover td { background: var(--relleno); }
.matriz .mz-nodo {
  text-align: left;
  font-weight: 400;
  white-space: nowrap;
  position: sticky; left: 0;
  background: var(--superficie);
  z-index: 1;
}
.matriz thead th.mz-nodo { z-index: 3; background: var(--superficie-alta); }
.matriz .mz-celda { text-align: center; }
.matriz .mz-celda input { vertical-align: middle; }

/* ---------- fondo ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

/* dos luces fijas: gradientes ya suaves, sin filter ni animación */
.bg::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55vmax 45vmax at 12% 8%, color-mix(in srgb, var(--acento) 17%, transparent), transparent 70%),
    radial-gradient(ellipse 50vmax 42vmax at 90% 96%, color-mix(in srgb, var(--acento) 9%, transparent), transparent 70%);
}
.bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 30%, var(--fondo1) 95%);
}

#stars { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- banner de demo ---------- */
.demo-banner {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 30;
  text-align: center;
  padding: 6px 12px;
  font-weight: 700; font-size: var(--fs-sm); line-height: 1.35;
  color: var(--sobre-aviso);
  background: repeating-linear-gradient(135deg, var(--aviso), var(--aviso) 14px, var(--aviso-2) 14px, var(--aviso-2) 28px);
}

/* ---------- topbar ---------- */
.topbar {
  position: fixed; top: var(--banner-h); left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 26px;
  z-index: 20;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  font-weight: 700; font-size: var(--fs-md);
  color: var(--texto-suave);
}
.brand #brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-dot {
  flex-shrink: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--acento);
}

/* ---------- escena radial ---------- */
.scene { position: fixed; inset: 0; z-index: 10; }

.links { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.25s; }
.links.gone { opacity: 0; }
.links .link {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  opacity: 0.5;
  animation: link-in 0.5s ease both;
}
@keyframes link-in { from { opacity: 0; } to { opacity: 0.5; } }

/* --- nodo central --- */
.center-node {
  position: absolute;
  width: var(--centro-d); height: var(--centro-d);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
}
/* halo: respira por opacidad (compositor), no por box-shadow */
.center-node::before {
  content: "";
  position: absolute; inset: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento) 30%, transparent), transparent 68%);
  opacity: 0.55;
  animation: breathe 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe { 50% { opacity: 1; } }

.ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  animation: ring-spin 40s linear infinite;
  pointer-events: none;
}
.ring-1 { inset: -18px; border-style: dashed; }
.ring-2 { inset: -44px; opacity: 0.4; animation-direction: reverse; animation-duration: 70s; border-style: dotted; }
@keyframes ring-spin { to { transform: rotate(360deg); } }

.center-core {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 20px;
  font-family: inherit;
  color: var(--texto);
  background:
    radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--texto) 14%, transparent), transparent 46%),
    linear-gradient(160deg, color-mix(in srgb, var(--acento) 30%, var(--fondo2)), var(--fondo2) 70%);
  border: 1px solid var(--acento-borde);
  box-shadow: var(--sombra-1), inset 0 -10px 24px rgba(0, 0, 0, 0.3);
  transition: border-color 0.25s;
}
.center-core:disabled { opacity: 1; cursor: default; }
.center-core:not(:disabled) { cursor: pointer; }
.center-core:not(:disabled):hover { border-color: var(--acento-texto); }
.center-core:focus-visible { outline-offset: 6px; }

.center-initial {
  font-weight: 800; font-size: var(--fs-md); letter-spacing: 0.26em;
  color: var(--acento-texto);
}
.center-initial svg { width: 20px; height: 20px; display: block; }
.center-name {
  font-weight: 800;
  font-size: clamp(1.1rem, 2.1vw, 1.5rem);
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-wrap: balance;
}
.center-tagline {
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  line-height: 1.4;
  text-wrap: balance;
}
.center-node.back .center-tagline { color: var(--acento-texto); }

/* pop del centro al cambiar de nivel: entra desde chico, sin rebote */
.center-core.pop { animation: center-pop 0.3s var(--ease-out); }
@keyframes center-pop { from { transform: scale(0.92); } }

/* --- satélites --- */
.node {
  position: absolute;
  width: var(--nodo-d); height: var(--nodo-d);
  transform: translate(-50%, -50%);
}

.node-btn {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--texto) 11%, transparent), transparent 50%),
    color-mix(in srgb, var(--fondo2) 88%, transparent);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  padding: 12px;
  color: var(--texto);
  font-family: inherit;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
  box-shadow: var(--sombra-1);
}
.node-btn:hover, .node-btn:focus-visible {
  transform: scale(1.06);
  border-color: var(--c);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent);
}
.node-btn:focus-visible { outline-color: var(--c); outline-offset: 4px; }

.node-mark {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c);
  margin-bottom: 3px;
  flex-shrink: 0;
}

/* logo de marca (PNG transparente) */
.node-logo {
  max-width: 62px; max-height: 34px;
  object-fit: contain;
  margin-bottom: 3px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.list-card .node-logo { max-width: 46px; max-height: 30px; margin-bottom: 0; flex-shrink: 0; }
.node-name {
  font-size: 0.8125rem; font-weight: 600;
  text-align: center; line-height: 1.25;
}
.node-area {
  font-size: var(--fs-sm); font-weight: 600;
  color: color-mix(in srgb, var(--c) 85%, var(--texto));
}

/* "próximamente": se apaga el color, no la legibilidad */
.node.off .node-btn { border-style: dashed; box-shadow: none; }
.node.off .node-name { color: var(--texto-suave); }
.node.off .node-area { color: var(--texto-suave); }
.node.off .node-mark { opacity: 0.55; }

/* tooltip descripción */
.node-tip {
  position: absolute;
  left: 50%; top: calc(100% + 14px);
  transform: translateX(calc(-50% + var(--tip-dx, 0px))) translateY(6px);
  width: 230px;
  background: var(--superficie-alta);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: var(--fs-sm); line-height: 1.5;
  color: var(--texto-suave);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s var(--ease-out);
  z-index: 50;
  box-shadow: var(--sombra-2);
}
.node-tip strong { color: var(--texto); display: block; margin-bottom: 3px; font-size: var(--fs-base); }
.node-tip .badge {
  display: inline-block; margin-top: 8px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 9px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  color: color-mix(in srgb, var(--c) 85%, var(--texto));
}
.node.tip-up .node-tip { top: auto; bottom: calc(100% + 14px); transform: translateX(calc(-50% + var(--tip-dx, 0px))) translateY(-6px); }
.node:hover .node-tip { transition-delay: 0.35s; }
.node-btn:focus-visible + .node-tip { transition-delay: 0s; }
.node:hover .node-tip, .node-btn:focus-visible + .node-tip {
  opacity: 1;
  transform: translateX(calc(-50% + var(--tip-dx, 0px))) translateY(0);
}

/* órbita cargada: app.js achica --nodo-d; por debajo de 108px se va el área (queda en el tooltip) */
.scene.compacta .node-area { display: none; }
.scene.compacta .node-name { font-size: var(--fs-sm); }
.scene.compacta .node-btn { padding: 8px; gap: 3px; }

/* ---------- vista lista (mobile) ---------- */
.list-view { display: none; }

.list-children {
  display: none;
  flex-direction: column; gap: 10px;
  margin-left: 12px; padding-left: 14px;
  border-left: 1px solid var(--borde);
}
.list-children.open { display: flex; }
.lc-chev {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--texto-suave);
  transition: transform 0.2s var(--ease-out);
}
.list-card[aria-expanded="true"] .lc-chev { transform: rotate(90deg); }

/* ---------- transición entre niveles (drill-down): el único momento animado ---------- */
/* entrada: el botón crece desde el núcleo (fill backwards para no pisar el hover) */
.node .node-btn {
  animation: node-enter 0.3s var(--ease-out) backwards;
  animation-delay: var(--enter-delay, 0s);
}
@keyframes node-enter {
  from { transform: scale(0.2); opacity: 0; }
}

/* salida: se contrae mientras converge hacia el núcleo */
.node.exit .node-btn { animation: node-exit 0.16s ease-in both; }
@keyframes node-exit {
  to { transform: scale(0.1); opacity: 0; }
}
.node.converge { transition: left 0.16s ease-in, top 0.16s ease-in; }

/* vuelo: del núcleo a su posición en órbita, en cascada */
.node.fly {
  transition: left 0.32s var(--ease-out), top 0.32s var(--ease-out);
  transition-delay: var(--enter-delay, 0s);
}

/* ---------- ventanas de escritorio ---------- */
.win {
  position: fixed;
  display: flex; flex-direction: column;
  min-width: 340px; min-height: 240px;
  max-width: 100vw;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: var(--sombra-2);
  overflow: hidden;
  resize: both;
  z-index: 200;
  animation: win-in 0.28s var(--ease-out) both;
}
.win:focus { outline: none; }
@keyframes win-in {
  from { transform: scale(0.96) translateY(10px); opacity: 0; }
}
.win.min { display: none; }
.win.max {
  /* debajo de la topbar: Perfil, Administración y el buscador siguen a mano */
  inset: calc(var(--banner-h) + 72px) 14px 74px 14px !important;
  width: auto !important; height: auto !important;
  resize: none;
}
.win.focus { border-color: color-mix(in srgb, var(--c) 60%, transparent); }

.win-header {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 14px;
  cursor: move;
  user-select: none;
  touch-action: none;
  background: var(--relleno);
  border-bottom: 1px solid var(--borde-suave);
  flex-shrink: 0;
}
.win-header:focus-visible { outline-offset: -3px; }
.win-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
}
.win-title {
  flex: 1;
  font-size: var(--fs-base); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.2s, color 0.2s;
}
.win-btn svg { width: 15px; height: 15px; }
.win-btn:hover { background: var(--relleno-hover); color: var(--texto); }
.win-btn.close:hover { background: var(--error-fondo); color: var(--error); }

.win-body { position: relative; flex: 1; min-height: 0; }
.win-body iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: transparent;
}
.win.dragging .win-body iframe { pointer-events: none; }

.win-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  background: var(--superficie);
  font-size: var(--fs-base); color: var(--texto-suave);
  transition: opacity 0.35s;
}
.win-loading.done { opacity: 0; pointer-events: none; }
.win-spinner {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--borde);
  border-top-color: var(--c, var(--acento));
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- taskbar ---------- */
.taskbar {
  position: fixed;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 10px;
  /* único vidrio de la interfaz: flota sobre contenido vivo */
  background: color-mix(in srgb, var(--superficie) 78%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--borde);
  border-radius: 16px;
  z-index: 400;
  box-shadow: var(--sombra-1);
}
.taskbar:empty { display: none; }
.task-btn {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  padding: 8px 13px;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--relleno);
  color: var(--texto);
  font-size: var(--fs-sm); font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.task-btn:hover { background: var(--relleno-hover); }
.task-btn.active { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.task-btn.minimized { color: var(--texto-suave); }
.task-btn.minimized .win-dot { opacity: 0.5; }
.task-btn .win-dot { width: 8px; height: 8px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; top: calc(var(--banner-h) + 74px); right: 22px;
  transform: translateY(-8px);
  max-width: min(440px, calc(100vw - 32px));
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 11px 18px;
  font-size: var(--fs-base);
  line-height: 1.4;
  box-shadow: var(--sombra-1);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s var(--ease-out);
  z-index: 600;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ---------- táctil: objetivos de 44px ---------- */
@media (pointer: coarse) {
  .icon-btn, .win-btn { width: 44px; height: 44px; }
  .btn-mini, .task-btn, .admin-tab { min-height: 44px; }
  .matriz tbody th, .matriz td { padding: 11px 12px; }
  .dd-item { padding: 12px 10px; }
  .dd-btn { min-height: 44px; }
}

/* ---------- vista lista: tarjetas (mobile, o cuando hay más apps de las que entran en órbita) ---------- */
.list-header { text-align: center; margin-bottom: 10px; }
.list-header h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.01em; text-wrap: balance; }
.list-header p { font-size: var(--fs-base); color: var(--texto-suave); margin-top: 6px; }
.list-card {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--texto);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.25s, transform 0.2s var(--ease-out);
}
.list-card:active { transform: scale(0.985); }
.list-card:hover { border-color: var(--c); }
.list-card .node-mark { margin-bottom: 0; }
.list-card .lc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.list-card .lc-name { font-weight: 600; font-size: var(--fs-md); }
.list-card .lc-desc { font-size: var(--fs-sm); color: var(--texto-suave); line-height: 1.45; }
.list-card .lc-area {
  font-size: var(--fs-sm); font-weight: 600;
  color: color-mix(in srgb, var(--c) 85%, var(--texto));
}
.list-card.off .lc-name, .list-card.off .lc-area { color: var(--texto-suave); }
.list-card.off { border-style: dashed; }
.list-card.off .node-mark { opacity: 0.55; }

/* app.js la fuerza cuando los nodos no entran en la órbita ni achicándolos */
html:has(body.lista-forzada), body.lista-forzada { overflow: auto; }
body.lista-forzada .scene { display: none; }
body.lista-forzada .list-view {
  display: flex; flex-direction: column; gap: 12px;
  position: relative; z-index: 10;
  padding: calc(var(--banner-h) + 84px) 16px 96px;
  max-width: 560px; margin: 0 auto;
}

/* ---------- responsive: lista en pantallas chicas ---------- */
@media (max-width: 760px), (max-height: 560px) {
  html, body { overflow: auto; }
  .scene { display: none; }
  .topbar { padding: 12px 16px; }
  .popover { right: 12px; top: calc(var(--banner-h) + 64px); }
  .list-view {
    display: flex; flex-direction: column; gap: 12px;
    position: relative; z-index: 10;
    padding: calc(var(--banner-h) + 84px) 16px 96px;
    max-width: 520px; margin: 0 auto;
  }
}

/* en pantallas angostas la ventana flotante no sirve: pasa a hoja completa */
@media (max-width: 760px) {
  .win, .win.max {
    inset: 0 !important;
    width: auto !important; height: auto !important;
    min-width: 0;
    border-radius: 0;
    border-width: 0;
    resize: none;
  }
  .win-header { cursor: default; padding-top: calc(7px + env(safe-area-inset-top, 0px)); }
  .win-btn.max { display: none; }
  .admin-panel { padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .taskbar { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .admin-form .acciones .espacio { flex-basis: 100%; height: 0; }
  .campo.corto { flex: 1 1 116px; }
}

/* ---------- movimiento reducido: los estados cambian, nada viaja ni gira ---------- */
@media (prefers-reduced-motion: reduce) {
  .e-track, .ring, .center-node::before, .center-core.pop { animation: none; }
  .center-node::before { opacity: 0.8; }
  .node .node-btn, .node.exit .node-btn { animation: fade-in 0.2s ease both; }
  .node.exit .node-btn { animation-direction: reverse; }
  .node.fly, .node.converge { transition: none; }
  .node-btn:hover, .node-btn:focus-visible { transform: none; }
  .login-card, .popover, .win { animation: fade-in 0.15s ease both; }
  .node-tip, .toast, .list-card, .lc-chev, .dd-flecha { transition-property: opacity; }
  .list-card:active { transform: none; }
}
@keyframes fade-in { from { opacity: 0; } }

/* ---------- diálogo de confirmación (reemplaza confirm() nativo) ---------- */
.confirmar {
  margin: auto;
  width: min(400px, calc(100vw - 32px));
  padding: 22px;
  color: var(--texto);
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra-2);
}
.confirmar[open] { animation: win-in 0.22s var(--ease-out) both; }
.confirmar::backdrop { background: color-mix(in srgb, var(--fondo1) 70%, transparent); }
.confirmar h2 { font-size: var(--fs-md); font-weight: 700; text-wrap: balance; }
.confirmar p { margin-top: 8px; color: var(--texto-suave); line-height: 1.55; }
.confirmar .acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .confirmar[open] { animation: fade-in 0.15s ease both; }
}

/* ---------- avisos de error: persistentes, con cierre ---------- */
.toast { display: flex; align-items: flex-start; gap: 12px; text-align: left; }
.toast.error {
  border-color: var(--error-borde);
  width: min(440px, calc(100vw - 32px));
}
.toast.error.show { pointer-events: auto; }
.toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-msg strong { display: block; }
.toast.error .toast-msg { color: var(--texto); }
.toast-detalle { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--texto-suave); line-height: 1.5; }
.toast-clave { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.toast-clave code {
  flex: 1; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-base);
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--relleno);
  border: 1px solid var(--borde);
  overflow-wrap: anywhere;
  user-select: all;
}
.toast-cerrar {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  margin: -4px -8px 0 0;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
}
.toast-cerrar svg { width: 14px; height: 14px; }
.toast-cerrar:hover { background: var(--relleno-hover); color: var(--texto); }
@media (pointer: coarse) { .toast-cerrar { width: 44px; height: 44px; margin: -10px -14px 0 0; } }

/* aviso no bloqueante bajo un campo (p. ej. CBU con dígitos de más o de menos) */
.campo-aviso { font-size: var(--fs-sm); color: var(--aviso); line-height: 1.45; }
.campo-aviso:empty { display: none; }

/* .campo trae flex-basis para repartirse el ancho dentro de .fila; suelto en un
   formulario en columna esa base se leería como alto */
.admin-form > .campo { flex: 0 0 auto; }

/* ---------- tanda 3: estado, perfil, topbar con texto, pista ---------- */
.user-badge.ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); }
.user-badge.error { border-color: var(--error-borde); color: var(--error); background: var(--error-fondo); }

.campo-ayuda { font-size: var(--fs-sm); color: var(--texto-suave); line-height: 1.45; }

/* topbar: en escritorio cada ícono lleva su nombre */
.icon-txt { display: none; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
@media (min-width: 900px) {
  .icon-btn:has(.icon-txt) { width: auto; padding: 0 13px 0 11px; display: flex; align-items: center; gap: 8px; flex-direction: row-reverse; }
  .icon-txt { display: inline; }
}

/* perfil: primero quién sos y qué ves; la contraseña, plegada */
.pop-datos { display: flex; flex-direction: column; gap: 8px; margin-top: -2px; }
.pop-datos div { display: grid; grid-template-columns: 68px 1fr; gap: 8px; font-size: var(--fs-sm); line-height: 1.45; }
.pop-datos dt { color: var(--texto-suave); }
.pop-datos dd { color: var(--texto); overflow-wrap: anywhere; }
.pop-detalle summary {
  cursor: pointer;
  font-size: var(--fs-base); font-weight: 600;
  padding: 6px 2px;
  border-radius: 8px;
  list-style-position: inside;
}
.pop-detalle summary:hover { color: var(--acento-texto); }
.pop-detalle[open] summary { margin-bottom: 10px; }
.popover { width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - var(--banner-h) - 90px); overflow-y: auto; }

/* pista de primer uso, bajo la órbita */
.pista {
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 15;
  max-width: min(560px, calc(100vw - 40px));
  text-align: center; text-wrap: balance;
  font-size: var(--fs-base); line-height: 1.5;
  color: var(--texto-suave);
  pointer-events: none;
}
@media (max-width: 760px), (max-height: 560px) { .pista { display: none; } }
body.lista-forzada .pista { display: none; }

/* ---------- tanda 4: buscador, filtro de listas ---------- */
.sin-loader .loader { display: none; }

.topbar-der { display: flex; align-items: center; gap: 10px; min-width: 0; }
.buscar-btn {
  display: flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 10px 0 12px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-suave);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.buscar-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.buscar-btn:hover { color: var(--texto); border-color: var(--acento-borde); background: var(--superficie-alta); }
kbd {
  font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
  padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--borde);
  background: var(--relleno);
  color: var(--texto-suave);
  white-space: nowrap;
}
@media (max-width: 900px) { .buscar-btn span, .buscar-btn kbd { display: none; } .buscar-btn { width: 40px; padding: 0; justify-content: center; } }
@media (pointer: coarse) { .buscar-btn { height: 44px; } }
@media (pointer: coarse) and (max-width: 900px) { .buscar-btn { width: 44px; } }

.buscador {
  margin: 14vh auto auto;
  width: min(560px, calc(100vw - 24px));
  max-height: 70vh;
  padding: 0;
  display: none; flex-direction: column;
  color: var(--texto);
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.buscador[open] { display: flex; animation: win-in 0.18s var(--ease-out) both; }
.buscador::backdrop { background: color-mix(in srgb, var(--fondo1) 65%, transparent); }
.buscador input {
  border: 0; border-bottom: 1px solid var(--borde);
  border-radius: 0;
  background: transparent;
  padding: 16px 18px;
  font-size: var(--fs-md);
}
.buscador input:focus-visible { outline: none; border-color: var(--acento-borde); }
.bq-lista { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.bq-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.bq-item .node-mark { margin: 0; }
.bq-item[aria-selected="true"] { background: var(--relleno-hover); }
.bq-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bq-nombre { font-weight: 600; }
.bq-meta { font-size: var(--fs-sm); color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-tag { font-size: var(--fs-xs); color: var(--texto-suave); white-space: nowrap; }
.bq-item.off .bq-nombre { color: var(--texto-suave); font-weight: 500; }
.bq-item.off .node-mark { opacity: 0.5; }
.bq-vacio { padding: 18px 14px; color: var(--texto-suave); line-height: 1.5; }
.bq-pie {
  padding: 9px 14px;
  border-top: 1px solid var(--borde-suave);
  font-size: var(--fs-xs); color: var(--texto-suave);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
@media (pointer: coarse) { .bq-pie { display: none; } .bq-item { padding: 13px 12px; } }
@media (prefers-reduced-motion: reduce) { .buscador[open] { animation: fade-in 0.15s ease both; } }

.lista-filtro { display: flex; align-items: center; gap: 10px; }
.lista-filtro input { flex: 1; min-width: 0; }
.lista-cuenta { font-size: var(--fs-sm); color: var(--texto-suave); white-space: nowrap; }

/* ---------- tanda 5: mobile y detalles ---------- */
/* los campos de un formulario no se estiran con la ventana maximizada (la matriz sí puede) */
.admin-form > .fila, .admin-form > .campo, .admin-form > label.check, .admin-form > .perm-titulo, .admin-todo, .lista-filtro { max-width: 760px; }

/* acciones dentro del campo (Generar / Copiar contraseña) */
.campo-con-accion { position: relative; display: flex; }
.campo-con-accion input { flex: 1; min-width: 0; padding-right: 150px; }
.campo-con-accion .btn-mini { position: absolute; top: 50%; transform: translateY(-50%); right: 5px; min-height: 30px; }
.campo-con-accion #ed-copiar-pass { right: 84px; }
.campo-con-accion:has(#ed-copiar-pass.hidden) input { padding-right: 86px; }
@media (pointer: coarse) { .campo-con-accion .btn-mini { min-height: 36px; } }

/* pestañas: degradé a la derecha mientras quede algo por ver */
.admin-tabs.hay-mas {
  mask-image: linear-gradient(to right, black calc(100% - 44px), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 44px), transparent);
}

.lc-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.lc-estado { font-size: var(--fs-xs); color: var(--texto-suave); white-space: nowrap; }

@media (max-width: 760px), (max-height: 560px) {
  /* vista lista: la topbar lleva fondo (el contenido pasa por debajo) y el
     nombre de la agencia vive una sola vez, en el encabezado de la lista */
  .topbar {
    background: color-mix(in srgb, var(--fondo1) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde-suave);
  }
  .brand #brand-name { display: none; }
  .toast { top: calc(var(--banner-h) + 70px); right: 12px; left: 12px; max-width: none; }
}
body.lista-forzada .topbar {
  background: color-mix(in srgb, var(--fondo1) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 760px) {
  /* con una hoja a pantalla completa la taskbar taparía Volver y las últimas filas:
     vuelve al minimizar */
  body:has(.win:not(.min)) .taskbar { display: none; }
}
@media (max-width: 760px) {
  /* la contraseña lleva acciones adentro: en pantallas angostas va en su propia fila */
  .campo:has(.campo-con-accion) { flex-basis: 100%; }
}

/* ---------- lista de precios en el editor de marcas ---------- */
.listas-box {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 760px;
  padding-top: 14px;
  border-top: 1px solid var(--borde-suave);
}
.listas-box .perm-titulo { margin-top: 0; }
.lp-datos { display: flex; flex-direction: column; gap: 6px; }
.lp-datos div { display: grid; grid-template-columns: 124px 1fr; gap: 10px; font-size: var(--fs-sm); line-height: 1.5; }
.lp-datos dt { color: var(--texto-suave); }
.lp-datos dd { color: var(--texto); overflow-wrap: anywhere; }
@media (max-width: 520px) { .lp-datos div { grid-template-columns: 1fr; gap: 1px; } }

/* ---------- conexiones de la marca (Planes, Automotive, MCP) ---------- */
.cx-seccion { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px; }
.cx-seccion + .cx-seccion { border-top: 1px dashed var(--borde-suave); }
.cx-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-cab .espacio { flex: 1; }
.cx-quitada .fila { opacity: .45; }
.cx-ok { color: var(--ok); }
.cx-esquema summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--texto-suave); padding: 2px 0; }
.cx-esquema summary:hover { color: var(--acento-texto); }
.cx-esq-cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 0 12px; }
.cx-esq-fuente { display: flex; flex-direction: column; gap: 6px; }
.cx-esq-fuente .admin-error, .cx-esq-fuente .campo-ayuda { margin: 0; }
.cx-esq-lista summary { font-weight: 400; color: var(--texto); }
.cx-esq-lista ul { margin: 4px 0 0; padding-left: 18px; }