/* Cabecera negra, igual que el panel de administracion.
   Va despues de sitio.css y portal.css: pisa solo los colores de la barra de
   arriba y de lo que cuelga de ella.

   El menu del socio tambien va en negro. La idea es que se lea como si la
   barra se estirara hacia abajo, y no como una tarjeta blanca pegada encima:
   por eso mismo fondo, mismo tono de texto y esquinas redondeadas abajo. */

header{background:var(--ink);border-bottom-color:#000;backdrop-filter:none}

/* logo y marca */
header .brand{color:#fff}
header .brand .c{color:#9A9AA1;border-left-color:#3A3A40}

/* links del menu */
.nav ul a{color:#B4B4BA}
.nav ul a:hover{color:#fff}
.nav ul a.on{color:#fff;border-bottom-color:var(--red)}

/* "Ver maquinas" */
.shop{color:#B4B4BA}
.shop:hover{color:#fff}
.shop b{color:#8A8A92}

/* boton de menu en celular */
.burger{background:transparent;border-color:#45454C;color:#fff}
.burger:hover{border-color:#fff}
.nav ul.open{background:var(--ink);border-bottom-color:#000;box-shadow:0 18px 34px rgba(0,0,0,.4)}

/* icono de cuenta (sitio publico, sin sesion) */
.acct .ic{background:transparent;border-color:#45454C;color:#fff}
.acct .ic:hover{border-color:#fff}

/* chip del socio (portal, con sesion) */
.utrig{background:transparent;border-color:#45454C;border-radius:999px}
.utrig:hover{border-color:#fff}
.utrig .av{background:var(--red);color:#fff}
.utrig .tx b{color:#fff}
.utrig .tx span{color:var(--red)}
.utrig .ch{color:#8A8A92}

/* el desplegable del sitio publico sigue siendo blanco */
.acct .pan{color:var(--ink)}
.acct .pan h4{color:var(--ink)}
.acct .pan ul li{color:var(--mut)}
.acct .pan .pie{color:var(--mut2)}

/* ---------------- menu del socio, en negro ----------------
   Se pisa con !important porque sitio.css lo define despues en el orden de
   cascada para varias de estas reglas, y si no vuelve a blanco a medias:
   quedaba el fondo negro con textos oscuros, ilegible. */

.upan{
  background:#26262B !important;
  border:1px solid #35353C !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 18px 44px rgba(0,0,0,.45) !important;
  color:#E6E6EA !important;
}

/* cabecera del desplegable: nombre y mail */
.upan .uhd{border-bottom-color:#3A3A42 !important;background:transparent !important}
.upan .uhd .av{background:var(--red) !important;color:#fff !important}
.upan .uhd .d b{color:#fff !important}
.upan .uhd .d span{color:#9A9AA4 !important}

/* la banda del nivel */
.upan .ubadge{
  background:#2E2E34 !important;
  border-top-color:#3A3A42 !important;
  border-bottom-color:#3A3A42 !important;
  color:var(--red) !important;
}
.upan .ubadge span{color:#9A9AA4 !important}

/* titulos de grupo: Mi cuenta, Abono y pagos */
.upan .ugrp{color:#8A8A94 !important;background:transparent !important}

/* las opciones */
.upan a.ui{color:#E6E6EA !important;background:transparent !important}
.upan a.ui:hover{background:#33333A !important;color:#fff !important}
.upan a.ui em{color:var(--red) !important;font-style:normal}
.upan a.ui.lk{color:#7A7A84 !important}
.upan a.ui.lk:hover{background:#2E2E34 !important;color:#8A8A94 !important}

/* cerrar sesion */
.upan .uout{border-top-color:#3A3A42 !important;background:transparent !important}
.upan .uout a{color:#FF8A90 !important}
.upan .uout a:hover{background:#3A2A2C !important;color:#FF9EA3 !important}