/* ============================================================
   Nexus Capital · marca
   ------------------------------------------------------------
   Hoja única de la identidad. Rebrandear = tocar el bloque de
   variables de acá arriba y nada más: el resto del archivo sólo
   consume esos valores.

   REGLA DURA: el logo NO se dibuja por código. Se sirven los PNG
   oficiales de vistas/images/plantilla/ (con <img src> o url()).
   Cualquier versión en SVG/CSS/tipografía es incorrecta, porque
   el bisel metálico del monograma no se reproduce con vectores.

   Los oros están MUESTREADOS del PNG oficial, no elegidos a ojo:
   por eso los bordes y botones se ven del mismo material que el
   logo. No sustituir por otros dorados.
   ============================================================ */
:root{
  --nx-ink:#0A0A0C;          /* tinta — fondo más oscuro de la marca */
  --nx-surface:#121215;      /* superficie — tarjetas sobre la tinta */
  --nx-gold-deep:#8C7849;    /* oro profundo — sombra del degradado */
  --nx-gold:#C4AF79;         /* oro medio — acento principal */
  --nx-gold-light:#F9F3E7;   /* brillo — luz alta del metal */
  --nx-text:#E8E6E0;         /* texto sobre tinta */
  --nx-muted:#8B8779;        /* texto secundario / apagado */
  --nx-line:rgba(196,175,121,.16); /* hairline de oro al 16% */

  --nx-display:"Cinzel",Georgia,serif;              /* pariente abierta de las capitales del wordmark */
  --nx-ui:"Inter",system-ui,-apple-system,sans-serif;

  /* Geometría de la placa: una sola fuente para todos los tamaños. */
  --nx-plate-radius:14px;
  --nx-plate-border:1px solid rgba(196,175,121,.28);

  /* Rutas de los PNG oficiales, relativas a este archivo
     (vistas/dist/css/ → ../../images/plantilla/). Centralizadas acá
     para que un cambio de carpeta se resuelva en un solo lugar. */
  --nx-mark-512:url("../../images/plantilla/logo-nexus-mark-512.png");
}

/* ============================================================
   PLACA OSCURA — regla de colocación del design system
   ------------------------------------------------------------
   El oro sobre fondo claro da 1.91:1 de contraste: el logo
   desaparece. No es un defecto del archivo, es física del color.
   Por eso el logo NUNCA se apoya directo sobre superficies claras.

   .nx-logo-plate es la solución por CSS (la alternativa es usar
   los PNG *-plate*). Es deliberadamente independiente del tema:
   en claro y en oscuro la placa se mantiene tinta, porque lo que
   necesita el logo es fondo oscuro, no "el fondo del tema".
   ============================================================ */
.nx-logo-plate{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--nx-ink);
  border:var(--nx-plate-border);
  border-radius:var(--nx-plate-radius);
  padding:18px 22px;
}
/* Placa ceñida, para tiles cuadrados (rail, avatar, badges). */
.nx-logo-plate--tile{
  padding:6px;
  border-radius:10px;
}
/* Placa circular, para avatares y sellos redondos. */
.nx-logo-plate--round{
  padding:8px;
  border-radius:50%;
}

/* ============================================================
   LOCKUP (monograma + wordmark) — logo-nexus-full-*.png
   ------------------------------------------------------------
   Ancho fluido con tope: el maestro es 1440×1112, servirlo a
   tamaño natural en pantalla es desperdicio de ancho de banda.
   ============================================================ */
.nx-lockup{
  display:block;
  width:100%;
  max-width:268px;
  height:auto;          /* el PNG no es cuadrado: sin esto se deforma */
  margin:0 auto;
}
/* Lockup dentro de una placa: la placa manda el fondo, el logo se
   queda sin margen propio para no descentrarse. */
.nx-logo-plate > .nx-lockup{margin:0}

/* ============================================================
   MONOGRAMA (NC) — logo-nexus-mark-*.png
   ------------------------------------------------------------
   Cuadrado, así que basta con fijar el lado. object-fit:contain
   protege el encuadre si algún contenedor impone otra proporción.
   ============================================================ */
.nx-mark{
  position:relative;
  width:124px;
  height:124px;
}
.nx-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Destello que barre el monograma (pantalla de carga).
   La máscara es el PROPIO PNG del logo, por eso la luz recorre
   sólo las letras y no un rectángulo encima: es el mismo metal
   pulido del logo traducido a movimiento. */
.nx-mark__sheen{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.72) 50%,transparent 60%);
  background-size:260% 100%;
  background-repeat:no-repeat;
  -webkit-mask-image:var(--nx-mark-512);
          mask-image:var(--nx-mark-512);
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  mix-blend-mode:screen;
  animation:nx-sheen 2.8s ease-in-out infinite;
}
@keyframes nx-sheen{
  0%{background-position:200% 0}
  58%,100%{background-position:-70% 0}
}

/* ============================================================
   RAIL — tile de marca de la barra lateral (vistas/modulos/menu.php)
   ------------------------------------------------------------
   El rail usa var(--bg-surface), que en tema CLARO es blanco: el
   monograma transparente ahí se perdería. Se convierte el tile en
   placa (mismos valores que .nx-logo-plate) para que el logo tenga
   fondo oscuro en los dos temas, sin depender de data-theme.
   Se usa `.rail .rail-brand` para ganarle por especificidad a
   components.css sin importar el orden de carga.
   ============================================================ */
.rail .rail-brand{
  background:var(--nx-ink);
  border:var(--nx-plate-border);
  border-radius:10px;
  overflow:hidden;
}
/* components.css pinta un punto índigo (--accent) en la esquina del
   tile: es de la paleta vieja y se monta sobre el monograma. Fuera. */
.rail .rail-brand::after{content:none}

.rail .rail-brand img{
  display:block;
  width:26px;
  height:26px;
  object-fit:contain;
}

/* Foco de teclado visible sobre la placa: el ring del tema es índigo
   y sobre tinta se lee mal, acá va en oro. */
.rail .rail-brand a:focus-visible{
  outline:2px solid var(--nx-gold);
  outline-offset:2px;
  border-radius:8px;
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .nx-mark__sheen{animation:none}
}