/* ==========================================================================
   EXSIM · Capa de marca sobre Tabler v1.6.1
   --------------------------------------------------------------------------
   NO modifica Tabler. Registra el acento "exsim" como una opción más del
   panel de apariencia (igual que blue/teal/purple…) y lo deja por defecto.
   Cárgalo SIEMPRE DESPUÉS de tabler.css y tabler-themes.css:

     <link rel="stylesheet" href="shared/tabler/css/tabler.css">
     <link rel="stylesheet" href="shared/tabler/css/tabler-themes.css">
     <link rel="stylesheet" href="shared/brand/exsim.css">

   y en <html ... data-bs-theme-primary="exsim">  para que sea el default.
   ========================================================================== */

:root {
  --exsim-acento:     #6d5cf0;  /* violeta EXSIM */
  --exsim-acento-rgb: 109, 92, 240;
}

/* EXSIM como acento del tema (mismo patrón que Tabler: solo define primary) */
[data-bs-theme-primary="exsim"],
[data-theme-primary="exsim"] {
  --tblr-primary: #6d5cf0;
  --tblr-primary-rgb: 109, 92, 240;
}

/* Swatch del panel de apariencia para la opción EXSIM */
.form-colorinput-exsim { background: #6d5cf0; }

/* Fondo de marca (avatares/sellos siempre en violeta EXSIM) */
.exsim-bg { background: var(--exsim-acento); color: #fff; }

/* ===== Marca EXSIM (siempre violeta, independiente del acento elegido) ===== */
.exsim-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--exsim-acento);
  color: #fff;
  font-weight: 700;
  letter-spacing: .5px;
}

/* ===== Logo por tema (opcional) =====
   Coloca shared/brand/logo-claro.svg y logo-oscuro.svg y usa .exsim-logo */
.exsim-logo {
  display: inline-block;
  width: 130px;
  height: 34px;
  background: center / contain no-repeat url("logo-claro.svg");
}
[data-bs-theme="dark"] .exsim-logo { background-image: url("logo-oscuro.svg"); }

/* ===== Hero del banner (cabecera de las apps) + circuito animado ===== */
.exhero { position: relative; overflow: hidden; border: 0; border-radius: var(--tblr-border-radius, 12px); box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); }
.exhero-img { display: block; width: 100%; height: auto; }
.exhero-circuit { position: absolute; top: -24px; right: -30px; pointer-events: none; opacity: .55; }
.exhero-circuit path { stroke-dasharray: 7 11; animation: exhflow 10s linear infinite; }
.exhero-circuit circle { animation: exhpulse 3.2s ease-in-out infinite; }
.exhero-circuit circle:nth-of-type(2){animation-delay:.6s} .exhero-circuit circle:nth-of-type(3){animation-delay:1.2s}
.exhero-circuit circle:nth-of-type(4){animation-delay:1.8s} .exhero-circuit circle:nth-of-type(5){animation-delay:2.4s}
@keyframes exhflow { to { stroke-dashoffset: -180; } }
@keyframes exhpulse { 0%,100% { opacity:.4 } 50% { opacity:1 } }

/* Lanzador de aplicaciones (hamburguesa del topbar) */
.exapp-launch { transition: background .15s, transform .15s; text-decoration: none; }
.exapp-launch:hover { background: rgba(var(--tblr-primary-rgb), .10); transform: translateY(-1px); }
.exapp-launch.active { background: rgba(var(--tblr-primary-rgb), .16); }