/* Nodo · Estilos de la interfaz. Solo usa los tokens de /marca/tokens.css. */
[hidden] { display: none !important; }
html { font-family: var(--fuente-texto); font-size: 100%; }
body { margin: 0; background: var(--bg); color: var(--texto); font-size: var(--fs-base); line-height: var(--lh-base); }
h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 600; line-height: 1.15; letter-spacing: 0.005em; }
a { color: var(--enlace); }
:focus-visible { outline: 3px solid var(--nodo-celeste); outline-offset: 2px; }
:root { --ancho-menu: 288px; --ancho-menu-colapsado: 76px; }
* { box-sizing: border-box; }
body { min-height: 100vh; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: var(--ancho-menu) 1fr; min-height: 100vh; transition: grid-template-columns .2s ease; }
.app.colapsado { grid-template-columns: var(--ancho-menu-colapsado) 1fr; }

/* ---------- Menú lateral ---------- */
.menu { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--texto); border-right: 1px solid var(--borde); overflow: hidden; }
.menu__marca { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem .75rem 1rem 1rem; border-bottom: 1px solid var(--borde); min-height: 76px; }
.menu__marca a { display: block; line-height: 0; }
.app.colapsado .menu__marca { flex-direction: column; padding: .75rem .5rem; }

.boton-icono { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radio-chico); border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; flex: none; }
.boton-icono:hover { background: var(--superficie); }
.icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.menu__nav { flex: 1; overflow-y: auto; padding: .75rem .625rem 1rem; scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
.menu__grupo { margin: 0 0 .75rem; padding: 0; list-style: none; }
.menu__titulo { margin: 1rem .75rem .375rem; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-secundario); }
.app.colapsado .menu__titulo { visibility: hidden; height: 0; margin: .5rem 0; border-top: 1px solid var(--borde); }

.item { position: relative; display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .75rem; border-radius: var(--radio-chico); color: var(--texto-secundario); text-decoration: none; font: inherit; font-size: .9375rem; background: none; border: 0; cursor: pointer; text-align: left; }
.item:hover { background: var(--superficie); color: var(--texto); }
.item[aria-current="page"] { background: var(--superficie); color: var(--texto); font-weight: 600; }
/* Nodo lima: acento chico, solo sobre fondo oscuro */
.item[aria-current="page"]::before { content: ""; position: absolute; left: -.625rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--nodo-lima); }
.item__texto { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item__chevron { width: 16px; height: 16px; transition: transform .2s; }
.item[aria-expanded="true"] .item__chevron { transform: rotate(90deg); }
.contador { display: inline-flex; align-items: center; gap: .375rem; padding: .0625rem .5rem; border-radius: 999px; background: var(--borde); color: var(--texto); font-size: .75rem; font-weight: 600; }
.contador--alerta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nodo-rojo); }
.app.colapsado .item { justify-content: center; padding: .625rem; }
.app.colapsado .item__texto, .app.colapsado .item__chevron, .app.colapsado .contador, .app.colapsado .submenu { display: none; }
.app.colapsado .item .punto-colapsado { display: block; }
.punto-colapsado { display: none; position: absolute; top: 5px; left: calc(50% + 5px); width: 8px; height: 8px; border-radius: 50%; background: var(--nodo-rojo); }

.submenu { list-style: none; margin: .125rem 0 .375rem; padding: 0 0 0 1.375rem; border-left: 1px solid var(--borde); margin-left: 1.375rem; }
.submenu[hidden] { display: none; }
.submenu .item { font-size: .875rem; padding: .375rem .625rem; }
.submenu .submenu { margin-left: .5rem; padding-left: .5rem; }
.subitem-etiqueta { display: block; padding: .375rem .625rem .125rem; font-size: .75rem; color: var(--texto-secundario); }

/* Selectores de contexto: organización y "actuando como" */
.contexto { display: grid; gap: .375rem; padding: .75rem .625rem; border-bottom: 1px solid var(--borde); }
.selector { position: relative; }
.selector__boton { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .4375rem .625rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.selector__boton:hover { border-color: var(--texto-secundario); }
.selector__textos { flex: 1; min-width: 0; line-height: 1.25; }
.selector__etiqueta { display: block; font-size: .6875rem; color: var(--texto-secundario); }
.selector__valor { display: block; font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selector__chevron { width: 16px; height: 16px; color: var(--texto-secundario); }
.selector__inicial { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--radio-chico); background: var(--texto); color: var(--bg); font-family: var(--fuente-titulos); font-size: .875rem; }
.selector__inicial--persona { border-radius: 50%; background: var(--borde); color: var(--texto); font-size: .6875rem; }
.selector__lista { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .375rem; list-style: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico); box-shadow: 0 8px 24px color-mix(in srgb, var(--nodo-azul-profundo) 60%, transparent); }
.selector__lista a { display: grid; grid-template-columns: auto 1fr; column-gap: .625rem; align-items: center; padding: .5rem; border-radius: 6px; color: var(--texto); text-decoration: none; font-size: .875rem; }
.selector__lista a .selector__inicial { grid-row: span 2; }
.selector__lista a:hover, .selector__lista a[aria-current="true"] { background: var(--bg); }
.selector__pais { grid-column: 2; font-size: .75rem; color: var(--texto-secundario); }
.app.colapsado .contexto { padding: .5rem; }
.app.colapsado .selector__textos, .app.colapsado .selector__chevron { display: none; }
.app.colapsado .selector__boton { justify-content: center; padding: .375rem; }
.app.colapsado .selector__lista { width: 260px; }

.menu__etapa { margin-left: .375rem; padding: 0 .375rem; border: 1px solid var(--borde); border-radius: 4px; font-size: .625rem; letter-spacing: .06em; }
.menu__titulo--plataforma { padding-top: .75rem; border-top: 1px dashed var(--borde); }
.marca-miembro { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--nodo-celeste); }
.item--heredado { font-style: normal; }
.item--secundario { font-size: .875rem; }
.icono--chico { width: 15px; height: 15px; color: var(--texto-secundario); }

.menu__pie { border-top: 1px solid var(--borde); padding: .75rem .625rem; }
.menu__credito { margin: .5rem .75rem 0; font-size: .6875rem; color: var(--texto-secundario); }
.menu__credito strong { font-weight: 600; color: var(--texto); }
.app.colapsado .menu__credito { display: none; }
.usuario { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--superficie); border: 1px solid var(--borde); font-family: var(--fuente-titulos); font-size: .875rem; flex: none; }
.usuario__datos { line-height: 1.3; min-width: 0; }
.usuario__nombre { font-size: .875rem; font-weight: 600; }
.usuario__rol { font-size: .75rem; color: var(--texto-secundario); }
.app.colapsado .usuario__datos { display: none; }
.app.colapsado .usuario { justify-content: center; padding: .5rem 0; }

/* ---------- Contenido ---------- */
.principal { min-width: 0; }
.barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; padding: .875rem 2rem; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.barra__abrir { display: none; }
.migas { font-size: .875rem; color: var(--texto-secundario); }
.migas strong { color: var(--texto); font-weight: 600; }
.buscador { margin-left: auto; position: relative; width: min(360px, 40vw); }
.buscador input { width: 100%; padding: .5rem .75rem .5rem 2.25rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--bg); color: var(--texto); font: inherit; font-size: .875rem; }
.buscador .icono { position: absolute; left: .625rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--texto-secundario); }
.boton { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: var(--radio-chico); border: 1px solid var(--texto); background: var(--texto); color: var(--superficie); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.boton .icono { width: 18px; height: 18px; }

.contenido { padding: 2rem; max-width: 1240px; }
.encabezado h1 { margin: 0; font-size: 2rem; }
.encabezado p { margin: .25rem 0 0; color: var(--texto-secundario); }

.indicadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; }
.indicador__cifra { font-family: var(--fuente-titulos); font-weight: 400; font-size: 2.25rem; line-height: 1; }
.indicador__etiqueta { margin-top: .5rem; font-size: .875rem; color: var(--texto-secundario); }
.indicador__nodo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .375rem; vertical-align: middle; }

.columnas { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem; }
.tarjeta h2 { margin: 0 0 1rem; font-size: 1.125rem; display: flex; justify-content: space-between; align-items: baseline; }
.tarjeta h2 a { font-family: var(--fuente-texto); font-size: .8125rem; font-weight: 400; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--borde); }
.lista li:first-child { border-top: 0; padding-top: 0; }
.fecha { flex: none; width: 52px; text-align: center; border-radius: var(--radio-chico); background: var(--bg); padding: .375rem 0; line-height: 1.1; }
.fecha b { display: block; font-family: var(--fuente-titulos); font-weight: 400; font-size: 1.375rem; }
.fecha span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-secundario); }
.lista__titulo { font-weight: 600; font-size: .9375rem; }
.lista__meta { font-size: .8125rem; color: var(--texto-secundario); }
.etiqueta { display: inline-block; padding: .0625rem .5rem; border-radius: 999px; border: 1px solid var(--borde); font-size: .75rem; color: var(--texto); background: var(--bg); margin-right: .25rem; }

.tarea { align-items: center; }
.tarea input { width: 18px; height: 18px; accent-color: var(--nodo-azul-medio); flex: none; }
.tarea__estado { margin-left: auto; flex: none; font-size: .75rem; display: inline-flex; align-items: center; gap: .375rem; color: var(--texto-secundario); }
.tarea__estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--borde); }
.tarea__estado--vencida { color: var(--texto); font-weight: 600; }
.tarea__estado--vencida::before { background: var(--nodo-rojo); }
.tarea__estado--en-curso::before { background: var(--nodo-lima-profundo); }

.bitacora { list-style: none; margin: 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--borde); }
.bitacora li { position: relative; padding: 0 0 1.125rem; }
.bitacora li::before { content: ""; position: absolute; left: calc(-1.25rem - 6px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--texto); }
.bitacora li:first-child::before { background: var(--texto); }
.bitacora time { font-size: .75rem; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: .06em; }

.columnas + .columnas { margin-top: 1rem; }

/* ---------- Pantallas chicas: menú desplegable ---------- */
.velo { display: none; }
@media (max-width: 1100px) { .indicadores { grid-template-columns: repeat(2, 1fr); } .columnas { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .app, .app.colapsado { grid-template-columns: 1fr; }
  .menu { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 20; transform: translateX(-100%); transition: transform .2s ease; }
  .app.menu-abierto .menu { transform: none; }
  .app.menu-abierto .velo { display: block; position: fixed; inset: 0; z-index: 15; background: color-mix(in srgb, var(--nodo-azul-profundo) 50%, transparent); }
  .menu__colapsar { display: none; }
  .barra { padding: .75rem 1rem; }
  .barra__abrir { display: inline-grid; }
  .buscador { display: none; }
  .contenido { padding: 1.25rem 1rem; }
  .boton span { display: none; }
  .barra .boton { margin-left: auto; }
}
@media (max-width: 480px) { .indicadores { grid-template-columns: 1fr 1fr; gap: .75rem; } .indicador__cifra { font-size: 1.75rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Marca de Nodo (logotipo provisorio: nombre escrito) ---------- */
.marca-nodo { display: inline-flex; align-items: center; gap: .625rem; color: var(--texto); text-decoration: none; }
.marca-nodo__simbolo { width: 32px; height: 32px; flex: none; }
.marca-nodo__nombre { font-family: var(--fuente-titulos); font-size: 1.625rem; font-weight: 500; letter-spacing: .04em; line-height: 1; }
.app.colapsado .marca-nodo__nombre { display: none; }

/* ---------- Estado vacío ---------- */
.vacio { display: grid; justify-items: center; gap: .5rem; padding: 3rem 1.5rem; text-align: center; background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio); }
.vacio .icono { width: 40px; height: 40px; color: var(--texto-secundario); stroke-width: 1.4; }
.vacio h2 { margin: .25rem 0 0; font-size: 1.25rem; }
.vacio p { margin: 0; max-width: 46ch; color: var(--texto-secundario); }

/* ---------- Pantalla de ingreso ---------- */
.ingreso { display: flex; flex-wrap: wrap; min-height: 100vh; }
.ingreso__marca { flex: 1 1 420px; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; padding: 4.5rem clamp(24px, 5vw, 72px) 3.5rem; background: var(--bg); color: var(--texto); }
.ingreso__logo-org { display: block; max-width: 300px; max-height: 72px; width: auto; height: auto; object-fit: contain; object-position: left; }
.ingreso__nombre-org { font-family: var(--fuente-titulos); font-size: 1.75rem; font-weight: 500; }
.ingreso__titulo { margin: 0; font-size: clamp(32px, 4vw, 46px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.ingreso__bajada { margin: 1rem 0 0; max-width: 34ch; font-size: 1.125rem; color: var(--texto-secundario); }
.ingreso__credito { padding-top: 1.25rem; border-top: 1px solid var(--borde); font-size: .875rem; color: var(--texto-secundario); }
.ingreso__credito a { color: var(--texto); text-underline-offset: 3px; }
.ingreso__formulario { flex: 1 1 420px; display: flex; align-items: center; justify-content: center; padding: 3.5rem clamp(24px, 5vw, 72px); background: var(--superficie); }
.ingreso__caja { width: 100%; max-width: 380px; }
.ingreso__caja h2 { margin: 0 0 .375rem; font-size: 1.75rem; }
.ingreso__caja > p { margin: 0 0 1.75rem; color: var(--texto-secundario); }

.campo { display: grid; gap: .375rem; margin-bottom: 1.25rem; }
.campo label { font-size: .875rem; font-weight: 600; }
.campo input { width: 100%; padding: .75rem .875rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); font: inherit; }
.campo input:focus { border-color: var(--enlace); }
.campo__ayuda { font-size: .8125rem; color: var(--texto-secundario); }
.campo__error { font-size: .8125rem; color: var(--texto); display: flex; gap: .375rem; align-items: center; }
.campo__error::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nodo-rojo); flex: none; }
.boton--ancho { width: 100%; justify-content: center; padding: .75rem 1rem; font-size: 1rem; }
.boton:hover { background: var(--enlace); border-color: var(--enlace); }

/* ---------- Avisos e insignias ---------- */
.aviso { display: flex; gap: .625rem; align-items: center; padding: .75rem 1rem; margin: 0 0 1.5rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); font-size: .9375rem; }
.aviso--exito::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--exito); flex: none; }
.insignia { display: inline-flex; align-items: center; gap: .375rem; padding: .0625rem .5rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--bg); color: var(--texto); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.insignia::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--texto-secundario); }
.insignia--activa::before { background: var(--exito); }
.insignia--suspendida::before { background: var(--nodo-rojo); }
.nodo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .375rem; vertical-align: middle; background: var(--texto-secundario); }
.nodo--exito { background: var(--exito); }

/* ---------- Tarjetas en grilla ---------- */
.grilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.tarjeta--enlace { display: grid; gap: .25rem; align-content: start; color: var(--texto); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.tarjeta--enlace:hover { border-color: var(--enlace); box-shadow: var(--sombra); }
.tarjeta--enlace b { font-size: 1.0625rem; margin-top: .5rem; }
.tarjeta__cabeza { display: flex; justify-content: space-between; align-items: center; }
.selector__vacio { padding: .5rem; font-size: .8125rem; color: var(--texto-secundario); }

/* ---------- Encabezado con logo ---------- */
.encabezado--con-logo { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.encabezado__logo { max-height: 56px; max-width: 160px; object-fit: contain; }
.encabezado__inicial { width: 56px; height: 56px; font-size: 1.5rem; }
.subtitulo { margin: 1.5rem 0 .5rem; font-size: 1rem; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .375rem 1.25rem; margin: 0; font-size: .9375rem; }
.datos dt { color: var(--texto-secundario); }
.datos dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Formularios ---------- */
.formulario { max-width: 760px; margin-top: 1.5rem; }
.formulario fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; }
.formulario legend { font-family: var(--fuente-titulos); font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; }
.formulario__acciones { display: flex; gap: .75rem; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--borde); }
.campos-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.campo select { width: 100%; padding: .75rem .875rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); font: inherit; }
.campo input[aria-invalid="true"] { border-color: var(--nodo-rojo); }
.campo__prefijo { display: flex; align-items: stretch; border: 1px solid var(--borde); border-radius: var(--radio-chico); overflow: hidden; background: var(--superficie); }
.campo__prefijo span { display: flex; align-items: center; padding: 0 .625rem; background: var(--bg); color: var(--texto-secundario); font-size: .875rem; white-space: nowrap; border-right: 1px solid var(--borde); }
.campo__prefijo input { border: 0; border-radius: 0; min-width: 0; }
.campo__codigo { font-family: var(--fuente-titulos); font-size: 2rem !important; letter-spacing: .4em; text-align: center; }
.opcional { font-weight: 400; color: var(--texto-secundario); font-size: .8125rem; }
.formulario-linea { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .375rem; }
.formulario-linea select, .formulario-linea input[type="file"] { padding: .5rem .625rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); font: inherit; font-size: .875rem; max-width: 100%; }
.boton--secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.boton--secundario:hover { background: var(--bg); color: var(--texto); border-color: var(--texto-secundario); }
a.boton { text-decoration: none; }
.barra__accion { margin-left: auto; }
.menu__pie form { margin: 0; }
.lista li { align-items: center; }
.ingreso__alternativa { margin-top: 1.5rem; font-size: .875rem; color: var(--texto-secundario); }

/* ---------- Páginas de error ---------- */
.pagina-error { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.pagina-error__caja { max-width: 440px; text-align: center; display: grid; justify-items: center; gap: .75rem; }
.pagina-error__codigo { margin: 1rem 0 0; font-family: var(--fuente-titulos); font-size: 3.5rem; line-height: 1; color: var(--texto-secundario); }
.pagina-error h1 { margin: 0; }
.pagina-error p { margin: 0; color: var(--texto-secundario); }

@media (max-width: 860px) { .barra__accion { margin-left: auto; } .formulario__acciones { flex-direction: column-reverse; } .formulario__acciones .boton { justify-content: center; } }

/* ---------- Opciones con descripción (radio) ---------- */
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.opcion { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); cursor: pointer; background: var(--superficie); }
.opcion:has(input:checked) { border-color: var(--enlace); box-shadow: inset 0 0 0 1px var(--enlace); }
.opcion input { margin-top: .3rem; accent-color: var(--nodo-azul-medio); }
.opcion > span { display: grid; gap: .125rem; }
.tarjeta h2 .lista__meta { font-family: var(--fuente-texto); font-weight: 400; }
.campo-linea { flex: 1; min-width: 200px; padding: .5rem .625rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); font: inherit; font-size: .875rem; }
.formulario-linea form { margin: 0; }

/* ---------- Logo e ícono de la organización ---------- */
.imagenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: .375rem; }
.imagen { display: grid; gap: .5rem; }
.imagen__vista { display: grid; place-items: center; height: 72px; padding: .5rem; border: 1px dashed var(--borde); border-radius: var(--radio-chico); background: var(--nodo-azul-profundo); }
.imagen__vista img { max-height: 56px; max-width: 100%; object-fit: contain; }
.imagen__vista--icono { width: 72px; }
.imagen__vista .lista__meta { color: #B9C6D6; }
.marca-nodo__suite { font-weight: 300; opacity: .8; }
.selector__inicial--plataforma { background: var(--nodo-celeste); color: var(--nodo-azul-profundo); }

/* ---------- Miembros ---------- */
.indicadores--tres { grid-template-columns: repeat(3, 1fr); }
.nodo--administrador { background: var(--nodo-azul-medio); }
.nodo--integrante { background: var(--exito); }
.nodo--invitado { background: var(--texto-secundario); }
.persona { align-items: center; }
.persona__datos { flex: 1; min-width: 0; }
.persona__datos .lista__meta { overflow-wrap: anywhere; }
.persona__nivel select { padding: .375rem .5rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); font: inherit; font-size: .875rem; }
.persona form { margin: 0; }
.opciones--lista { grid-template-columns: 1fr; gap: .5rem; margin-bottom: .5rem; }
.campo__leyenda { font-size: .875rem; font-weight: 600; margin-bottom: .375rem; padding: 0; }
fieldset.campo { border: 0; padding: 0; margin: 0 0 1.25rem; }
.aviso--error::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nodo-rojo); flex: none; }
@media (max-width: 480px) { .indicadores--tres { grid-template-columns: repeat(3, 1fr); gap: .5rem; } }
.selector__inicial--icono { object-fit: contain; background: var(--nodo-blanco); padding: 2px; }

/* ---------- Árbol de equipos ---------- */
.leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1rem; font-size: .8125rem; color: var(--texto-secundario); }
.organizacion-raiz { display: flex; align-items: center; gap: .625rem; padding: .5rem 0; }
.arbol { list-style: none; margin: 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--borde); margin-left: .875rem; }
.arbol .arbol { margin-left: 1rem; }
.arbol__nodo { position: relative; }
.arbol__nodo::before { content: ""; position: absolute; left: -1.25rem; top: 1.25rem; width: 1rem; border-top: 2px solid var(--borde); }
.arbol__fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .375rem .625rem; margin: .25rem 0; border-radius: var(--radio-chico); border: 1px solid transparent; }
.arbol__fila--mio { background: var(--bg); border-color: var(--borde); }
.arbol__fila:hover { border-color: var(--borde); }
.arbol__nombre { font-weight: 600; color: var(--texto); text-decoration: none; }
a.arbol__nombre:hover { color: var(--enlace); text-decoration: underline; }
.arbol__nombre--ajeno { font-weight: 400; color: var(--texto-secundario); }
.arbol__cantidad { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; color: var(--texto-secundario); }
.arbol__agregar { margin-left: auto; }
.arbol__agregar summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radio-chico); color: var(--texto-secundario); }
.arbol__agregar summary::-webkit-details-marker { display: none; }
.arbol__agregar summary:hover { background: var(--bg); color: var(--texto); }
.arbol__agregar[open] { flex-basis: 100%; margin-left: 0; }
.arbol__agregar--raiz { margin: 1rem 0 0; }
.arbol__agregar--raiz summary { width: auto; height: auto; display: inline-flex; gap: .375rem; padding: .375rem .5rem; font-size: .875rem; }
.insignia--coordina::before { background: var(--nodo-azul-medio); }
.insignia--participa::before { background: var(--exito); }
.insignia--observa::before { background: var(--texto-secundario); }
.insignia--lectura::before { display: none; }
.insignia--lectura .icono { width: 13px; height: 13px; }
.plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; margin: 1rem 0; }
.plantilla { margin: 0; }
.plantilla__boton { display: grid; gap: .25rem; width: 100%; height: 100%; padding: 1rem; text-align: left; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; }
.plantilla__boton:hover { border-color: var(--enlace); box-shadow: var(--sombra); }
.plantilla__boton .icono { color: var(--enlace); }

/* ---------- Ficha de equipo ---------- */
.migas-equipo { display: flex; flex-wrap: wrap; gap: .375rem; font-size: .875rem; color: var(--texto-secundario); margin-bottom: .5rem; }
.encabezado h1 .insignia { vertical-align: middle; font-family: var(--fuente-texto); margin-left: .5rem; }
.pila { display: grid; gap: 1rem; align-content: start; }
.persona__editar { position: relative; }
.persona__editar summary { list-style: none; }
.persona__editar summary::-webkit-details-marker { display: none; }
.persona__editar[open] { flex-basis: 100%; }
.persona__formulario { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.persona__formulario select { padding: .5rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); font: inherit; font-size: .875rem; }
.persona { flex-wrap: wrap; }
.boton-texto { background: none; border: 0; padding: 0; color: var(--enlace); font: inherit; font-size: .875rem; text-decoration: underline; cursor: pointer; }
.lista--compacta li { padding: .5rem 0; justify-content: space-between; }
.campo textarea { width: 100%; padding: .75rem .875rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); font: inherit; resize: vertical; }
.persona-linea { display: flex; align-items: center; margin: .375rem 0; }
.nodo--alerta { background: var(--nodo-rojo); }
.formulario__acciones form { margin: 0; }
.item--equipo { padding-left: 1.125rem; font-size: .875rem; }
.item--equipo .marca-miembro { margin: 0 .3rem 0 .2rem; }
.app.colapsado .item--equipo { display: none; }
.grilla-equipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.equipo-tarjeta { display: grid; gap: .25rem; padding: .875rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--bg); color: var(--texto); text-decoration: none; }
.equipo-tarjeta:hover { border-color: var(--enlace); }
.vacio--chico { padding: 1.5rem 1rem; border: 0; background: transparent; }
.vacio--chico .icono { width: 28px; height: 28px; }
.campo .opcion input, .opcion input[type="radio"] { width: auto; flex: none; padding: 0; }
.campo .opcion { text-align: left; }

/* ---------- Bitácora ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; margin: 1.5rem 0 1rem; padding: 1rem 1.25rem; }
.filtros .campo { margin: 0; min-width: 150px; flex: 1; }
.filtros .campo input, .filtros .campo select { padding: .5rem .625rem; }
.filtros__limpiar { margin-bottom: .625rem; }
.columnas--bitacora { grid-template-columns: 1.6fr 1fr; align-items: start; }
.mes { margin: 1.25rem 0 .75rem; font-size: 1rem; text-transform: capitalize; color: var(--texto-secundario); }
.mes:first-child { margin-top: 0; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--borde); }
.hito { position: relative; padding: 0 0 1.25rem; }
.hito__marca { position: absolute; left: calc(-1.5rem - 7px); top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--texto); }
.hito--decision .hito__marca { background: var(--nodo-azul-medio); border-color: var(--nodo-azul-medio); }
.hito--reunion .hito__marca { background: var(--exito); border-color: var(--exito); }
.hito--documento .hito__marca { background: var(--nodo-celeste); border-color: var(--nodo-azul-medio); }
.hito--incorporacion .hito__marca, .hito--estructura .hito__marca { border-color: var(--texto-secundario); }
.hito--corregido { opacity: .65; }
.hito--corregido .hito__titulo { text-decoration: line-through; }
.hito__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; }
.hito__cabeza time { font-weight: 600; color: var(--texto); }
.hito__titulo { margin-top: .25rem; font-weight: 600; }
.hito__detalle { margin-top: .25rem; font-size: .9375rem; color: var(--texto); }
.hito__pie { margin-top: .25rem; }
.hito__corregir { margin-top: .375rem; }
.hito__corregir summary { list-style: none; display: inline; }
.hito__corregir summary::-webkit-details-marker { display: none; }
.hito__corregir form { margin-top: .5rem; padding: .75rem; border: 1px dashed var(--borde); border-radius: var(--radio-chico); }
.insignia--tipo::before { display: none; }
.insignia--reservado { border-style: dashed; }
.insignia--reservado::before { background: var(--nodo-rojo); }
.casilla { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 1rem; font-size: .9375rem; cursor: pointer; }
.casilla input { margin-top: .3rem; accent-color: var(--nodo-azul-medio); }
.hito-form .campo { margin-bottom: 1rem; }
.paginacion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }
.paginacion [aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (max-width: 1100px) { .columnas--bitacora { grid-template-columns: 1fr; } }

/* ---------- Documentos ---------- */
.espacio { display: grid; gap: .25rem; min-width: 180px; margin-left: auto; }
.espacio__barra { display: block; height: 6px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.espacio__barra span { display: block; height: 100%; background: var(--exito); }
.espacio__barra .espacio__lleno { background: var(--nodo-rojo); }
.documentos li { align-items: center; flex-wrap: wrap; }
.documento__icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radio-chico); background: var(--bg); color: var(--enlace); flex: none; }
.documentos .lista__titulo { color: var(--texto); text-decoration: none; }
.documentos .lista__titulo:hover { color: var(--enlace); text-decoration: underline; }
.insignia--sellado { border-color: var(--nodo-azul-medio); }
.insignia--sellado::before { display: none; }
.versiones { list-style: none; margin: 0; padding: 0; }
.version { padding: 1rem 0; border-top: 1px solid var(--borde); }
.version:first-child { border-top: 0; padding-top: 0; }
.version--definitiva .version__cabeza b { color: var(--enlace); }
.version__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.version__archivo { margin: .5rem 0; }
.version__archivo .boton { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.version__nota { margin: .25rem 0; font-size: .9375rem; }
.version__huella { margin: .25rem 0; }
.version__huella code { font-size: .8125rem; }
.version__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.version__acciones form { margin: 0; }
.sellos { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.sello { display: flex; gap: .625rem; padding: .625rem .75rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--bg); }
.sello > .icono { color: var(--enlace); margin-top: .125rem; }
.sello--fallido > .icono { color: var(--nodo-rojo); }
.sello b { font-size: .9375rem; }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 1rem; margin-bottom: .75rem; }
.casillas .casilla { margin-bottom: .5rem; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Actuando como ---------- */
.selector__opcion { display: grid; grid-template-columns: auto 1fr; column-gap: .625rem; align-items: center; width: 100%; padding: .5rem; border: 0; border-radius: 6px; background: none; color: var(--texto); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.selector__opcion .selector__inicial { grid-row: span 2; }
.selector__opcion:hover, .selector__opcion[aria-current="true"] { background: var(--bg); }
.selector__lista form { margin: 0; }
.selector__boton--actuando { border-color: var(--nodo-lima); box-shadow: inset 0 0 0 1px var(--nodo-lima); }
.datos--resumen { margin: 0 0 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.campo input:disabled, .campo select:disabled { background: var(--bg); color: var(--texto-secundario); }

/* ---------- Avisos ---------- */
.campanita { position: relative; margin-left: auto; }
.barra__accion + .campanita { margin-left: .25rem; }
.campanita__cuenta { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--nodo-rojo); color: var(--nodo-blanco); font-size: .6875rem; font-weight: 700; line-height: 17px; text-align: center; }
.avisos li { align-items: center; }
.avisos .lista__titulo { color: var(--texto); text-decoration: none; }
.avisos .lista__titulo:hover { color: var(--enlace); text-decoration: underline; }
.aviso-item--nuevo .lista__titulo { font-weight: 700; }
.grilla-canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.canal h2 { display: flex; align-items: center; gap: .5rem; }
.matriz { width: 100%; border-collapse: collapse; font-size: .875rem; }
.matriz th, .matriz td { padding: .5rem; border-bottom: 1px solid var(--borde); text-align: center; }
.matriz th:first-child, .matriz td:first-child { text-align: left; }
.matriz thead th { font-size: .75rem; color: var(--texto-secundario); font-weight: 600; }
.matriz input { width: 18px; height: 18px; accent-color: var(--nodo-azul-medio); }
.matriz__no { color: var(--texto-secundario); }
.tabla-desplazable { overflow-x: auto; }
.tarjeta.canal h2 { justify-content: flex-start; }

/* ---------- Mi seguridad y soporte ---------- */
.codigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.codigos code { display: block; padding: .5rem; border: 1px dashed var(--borde); border-radius: var(--radio-chico); background: var(--bg); text-align: center; font-size: 1rem; letter-spacing: .05em; }
.codigos-recuperacion { border-color: var(--nodo-azul-medio); }
.pasos { padding-left: 1.25rem; }
.pasos li { margin-bottom: 1rem; }
.qr { width: 200px; height: 200px; margin: .75rem 0; padding: .25rem; background: var(--nodo-blanco); border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.qr svg { width: 100%; height: 100%; }
.clave-df { font-size: .9375rem; letter-spacing: .08em; }
.campo__codigo--chico { max-width: 170px; font-size: 1.375rem !important; letter-spacing: .3em; }
.banda-soporte { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .625rem 2rem; background: var(--nodo-azul-profundo); color: var(--nodo-blanco); font-size: .875rem; }
.banda-soporte::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--nodo-lima); flex: none; }
.espacio__barra--chica { width: 60px; display: inline-block; vertical-align: middle; margin-left: .25rem; }
.matriz--auditoria td { text-align: left; vertical-align: top; }
.plan { padding: .5rem 0; border-top: 1px solid var(--borde); }
.plan summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.barra__accion form, form.barra__accion { margin: 0; }