:root{
  --brand-bg:#050909;
  --brand-plane:#081011;
  --brand-panel:#0d1718;
  --brand-card:#111d1e;
  --brand-card-2:#162426;
  --brand-line:rgba(124,220,222,.16);
  --brand-text:#f5fbfa;
  --brand-muted:#8ea5a4;
  --brand-cyan:#19d1d0;
  --brand-cyan-strong:#00aeb8;
  --brand-cyan-soft:rgba(25,209,208,.12);
  --brand-coral:#ee6747;
  --brand-green:#26b98f;
  --brand-shadow:0 1px 2px rgba(0,0,0,.45),0 18px 48px rgba(0,0,0,.22);

  /* Common aliases used by every DaaTools module. */
  --bg:var(--brand-bg)!important;
  --plane:var(--brand-bg)!important;
  --surface:var(--brand-panel)!important;
  --panel:var(--brand-panel)!important;
  --panel2:var(--brand-card)!important;
  --card:var(--brand-card)!important;
  --card2:var(--brand-card-2)!important;
  --soft:var(--brand-card-2)!important;
  --ink:var(--brand-text)!important;
  --txt:var(--brand-text)!important;
  --ink2:#c7d6d5!important;
  --text:var(--brand-text)!important;
  --muted:var(--brand-muted)!important;
  --dim:var(--brand-muted)!important;
  --line:var(--brand-line)!important;
  --border:var(--brand-line)!important;
  --accent:var(--brand-cyan)!important;
  --accent-2:var(--brand-cyan-strong)!important;
  --acc:var(--brand-cyan)!important;
  --blue:var(--brand-cyan)!important;
  --s1:var(--brand-cyan)!important;
  --s1-soft:var(--brand-cyan-soft)!important;
  --s1-track:#155b61!important;
  --s2:var(--brand-green)!important;
  --mint:var(--brand-cyan)!important;
  --lime:var(--brand-cyan)!important;
  --green:var(--brand-green)!important;
  --orange:var(--brand-coral)!important;
  --amber:var(--brand-coral)!important;
  --card-sh:var(--brand-shadow)!important;
}

html[data-theme="light"]{
  --plane:#edf7f6!important;
  --surface:#ffffff!important;
  --ink:#071111!important;
  --ink2:#385150!important;
  --muted:#667c7b!important;
  --grid:#cfe1e0!important;
  --axis:#abc6c5!important;
  --border:rgba(8,65,67,.14)!important;
  --card-sh:0 1px 2px rgba(0,48,49,.05),0 12px 32px rgba(0,48,49,.08)!important;
}

html[data-theme="dark"]{
  --plane:var(--brand-bg)!important;
  --surface:var(--brand-panel)!important;
  --ink:var(--brand-text)!important;
  --ink2:#c7d6d5!important;
  --muted:var(--brand-muted)!important;
  --grid:#193033!important;
  --axis:#274548!important;
  --border:var(--brand-line)!important;
  --s1:var(--brand-cyan)!important;
  --s1-soft:var(--brand-cyan-soft)!important;
  --s1-track:#155b61!important;
  --s2:var(--brand-green)!important;
  --card-sh:var(--brand-shadow)!important;
}

body{
  background-color:var(--brand-bg);
  background-image:
    radial-gradient(circle at 88% -8%,rgba(25,209,208,.10),transparent 31%),
    radial-gradient(circle at 8% 105%,rgba(0,174,184,.055),transparent 25%);
  color:var(--brand-text);
}
html[data-theme="light"] body{color:var(--ink)}

*{scrollbar-color:rgba(65,139,141,.5) transparent}
::-webkit-scrollbar-thumb{background:rgba(65,139,141,.42)!important}
::-webkit-scrollbar-thumb:hover{background:rgba(71,176,178,.62)!important}

button,.btn,.button,.hbtn,.chip,.control,input,select,.pill{
  transition:border-color .18s ease,background-color .18s ease,color .18s ease,
    transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease;
}
button:focus-visible,.btn:focus-visible,.button:focus-visible,.hbtn:focus-visible,
input:focus-visible,select:focus-visible,a:focus-visible{
  outline:2px solid var(--brand-cyan);
  outline-offset:3px;
}

.btn.primary,button.primary,.btn.primario,.chip.act,.hbtn.on,.hbtn.destacado,
nav button.active,.tab.active{
  background:linear-gradient(135deg,var(--brand-cyan),var(--brand-cyan-strong))!important;
  border-color:transparent!important;
  color:#021011!important;
  box-shadow:0 8px 26px rgba(0,190,196,.16)!important;
}
.btn.on{background:var(--brand-green)!important;border-color:var(--brand-green)!important}
.btn:hover,button:hover,.hbtn:hover,.chip:hover{border-color:rgba(25,209,208,.58)}

.metric,.card,.panel,.user,.automation,.provider,.connection,.table-wrap,.table,
.modal,.caja,.drawer,.col,.tarj,.dash-card{
  border-color:var(--brand-line)!important;
}
.metric:hover,.card:hover,.user:hover,.tarj:hover,.dash-card:hover{
  border-color:rgba(25,209,208,.48)!important;
}

.fill,.bar i,.progfill,.rank-fill,.chart i{
  background:linear-gradient(90deg,var(--brand-cyan-strong),var(--brand-cyan))!important;
}
.grad,.top h1{
  background:linear-gradient(90deg,#f6fbfa 0%,var(--brand-cyan) 72%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}

/* Boards keep their useful dotted work surface, now tinted to the brand. */
#tablero,main{
  background-color:var(--brand-bg);
  background-image:radial-gradient(circle at 1px 1px,rgba(41,116,119,.23) 1px,transparent 0)!important;
}
.nav-cat.current>.cat-head{color:#bdf8f6!important;background:var(--brand-cyan-soft)!important}
.nav-cat.current>.cat-head::before{background:var(--brand-cyan)!important;box-shadow:0 0 10px var(--brand-cyan)!important}

::selection{background:rgba(25,209,208,.28);color:#fff}

@media(pointer:fine){
  /* Un panel incrustado NO pinta fondo: lo pone la ventana de arriba.
     Cuando lo pintaba, se veia una costura donde acababa su contenido y
     empezaba el del padre -dos degradados anclados a cajas de distinto
     alto- y la pantalla parecia partida en bandas. */
  html.brand-embebido,html.brand-embebido body{background:transparent!important}
  /* Algunos paneles pintan su propio lienzo en un contenedor interno en vez
     de en el body. Ese contenedor solo cubre su contenido, asi que se veia
     como un rectangulo de otro color recortado sobre el fondo del padre.
     Se listan por nombre a proposito: aqui van los lienzos de pagina, NO las
     tarjetas ni los paneles, que si deben conservar su fondo. */
  html.brand-embebido main.dash-main,
  html.brand-embebido .dash-shell,
  html.brand-embebido .wrap,
  html.brand-embebido .shell{background:transparent!important}

  html.brand-custom-cursor,html.brand-custom-cursor body,
  html.brand-custom-cursor body *{cursor:none!important}
  /* Los campos de escritura conservan su barra nativa. Antes esto se hacia
     con :has() sobre el body, que obliga al navegador a reevaluar el arbol
     entero cada vez que el cursor cambia de estado: es la causa principal
     del tiron al pasar por el menu. Con reglas estaticas cuesta cero. */
  html.brand-custom-cursor input,html.brand-custom-cursor textarea,
  html.brand-custom-cursor select,
  html.brand-custom-cursor [contenteditable="true"]{cursor:text!important}
  /* Sin fundido: la pagina tiene un cursor por iframe y al cruzar de uno a
     otro hay un relevo. Con transicion de opacidad, ese relevo se ve como un
     parpadeo y parece que el raton se atasca; instantaneo se percibe como un
     unico cursor continuo. */
  .brand-cursor{position:fixed;left:0;top:0;width:22px;height:26px;
    z-index:2147483647;pointer-events:none;opacity:0;
    will-change:transform;transition:none}
  .brand-cursor.is-visible{opacity:1}
  .brand-cursor svg{display:block;width:100%;height:100%;overflow:visible}
  /* La escala se aplica SOLO a la flecha. Si se aplicase al svg entero,
     arrastraria a las dos capas con blur y el navegador tendria que volver a
     rasterizarlas en cada fotograma de la animacion. La flecha no lleva
     filtro, asi que transformarla es gratis. */
  .brand-cursor-arrow{transform-origin:3px 3px;
    transition:transform .09s cubic-bezier(.22,1,.36,1)}
  /* Ni los filtros ni las sombras cambian nunca despues de pintarse: la capa
     se rasteriza una sola vez y moverla es solo trasladarla. Animar 'filter'
     obligaba a repintar el cursor en cada fotograma. */
  .brand-cursor-arrow{fill:#050909;stroke:#f8ffff;stroke-width:1.9;
    stroke-linejoin:round;stroke-linecap:round}
  .brand-cursor-glow{fill:none;stroke:rgba(24,211,210,.9);stroke-width:5;
    stroke-linejoin:round;stroke-linecap:round;opacity:.5;filter:blur(3.5px)}
  .brand-cursor-halo{fill:none;stroke:rgba(24,211,210,.55);stroke-width:9;
    stroke-linejoin:round;stroke-linecap:round;opacity:0;filter:blur(7px);
    transition:opacity .09s ease}
  .brand-cursor.is-action .brand-cursor-halo{opacity:.75}
  .brand-cursor.is-action .brand-cursor-arrow{transform:scale(1.05)}
  .brand-cursor.is-pressed .brand-cursor-arrow{transform:scale(.88)}
  .brand-cursor.is-text{opacity:0}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}