/* CARRIL DEL PORTAL: correcciones de capas, de altura y de la campanita.

   Va DESPUES de lateral.css -- y, sobre todo, DESPUES de parametros.css, que
   es lo que hace falta para el arreglo 3. Se separa en su propio archivo para
   no mezclar el diseno del menu (alla) con estos arreglos puntuales (aca).

   ---------------------------------------------------------------------------
   1) LAS CAPAS

   La cinta clarita de Parametros 76 (la que dice "Parametros para VANK PRO
   1410 > Cortar > MDF > 3 mm") se montaba POR ENCIMA del menu de la izquierda.

   POR QUE: el carril tiene z-index 40 y la cinta tiene un valor igual. Cuando
   dos elementos empatan en z-index, el navegador dibuja arriba al que viene
   DESPUES en el HTML, y la cinta esta dentro del contenido. El empate lo
   desempataba el orden, no la intencion.

   LA REGLA QUE FALTABA: el menu es navegacion y el contenido pasa por debajo,
   nunca al reves. Por eso el carril sube a 60 y las cintas bajan a 30.

   ---------------------------------------------------------------------------
   2) LA ALTURA

   lateral.css arranca el carril en top:var(--hdr,60px). Pero 60px es el alto
   de la cinta del SITIO; la del PORTAL es mas alta, porque lleva el chip del
   socio y la campanita. Con el numero fijo, el carril empezaba mas arriba de
   donde termina la cinta y se le metia por debajo.

   --hdrreal lo publica carril.js midiendo el <header> de verdad. El var()
   encadenado deja los dos respaldos puestos: si el JS no llegara a correr vale
   --hdr, y si tampoco existe, los 60px de siempre.

   ---------------------------------------------------------------------------
   3) LA CAMPANITA QUE DESAPARECIO

   En la barra del portal quedaba un cuadrado blanco vacio con el numerito
   rojo: el dibujo de la campana no se veia.

   POR QUE: choque de nombres. La campanita usa la clase .cbtn (avisos.css) y
   los botones de los pop-ups de Parametros 76 usan TAMBIEN .cbtn
   (parametros.css). Son dos cosas distintas con el mismo nombre. Como
   parametros.css se carga despues de avisos.css, sus botones -- rectangulares,
   blancos, con padding de boton de dialogo -- le ganaban a la campanita y la
   dejaban irreconocible.

   LA SOLUCION DE FONDO seria renombrar una de las dos clases, pero eso obliga
   a tocar avisos.js y parametros.js. Mientras tanto se le devuelven a la
   campanita sus valores con .cwrap adelante: ese contenedor es solo suyo y no
   existe en ningun pop-up, asi que la regla gana por especificidad sin afectar
   a los botones de los dialogos.

   SI ALGUN DIA cambia el aspecto de la campanita en avisos.css, hay que
   acordarse de este bloque: es el que manda. */

@media(min-width:1001px){
  /* El menu, por encima de todo lo que viva adentro del contenido. */
  .app>.side{z-index:60;top:var(--hdrreal,var(--hdr,60px))}

  /* El alto de la columna acompaña: si arranca mas abajo, tiene que terminar
     igual de abajo, no sobrarle lo que se corrio. */
  .app{min-height:calc(100vh - var(--hdrreal,var(--hdr,60px)))}

  /* Las cintas pegajosas del contenido, por debajo. Siguen quedando encima de
     las tarjetas que les pasan por atras, que es para lo que existe su sticky:
     lo unico que cambia es quien gana contra el menu. */
  .app .pcab{z-index:30}
}

/* ---- la campanita, en todos los tamaños ---- */
.cwrap .cbtn{width:42px;height:42px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid #45454C;color:#fff;
  font-size:inherit;font-weight:400;line-height:1;white-space:normal;
  transition:background .16s,border-color .16s}
.cwrap .cbtn svg{width:20px;height:20px;display:block}
.cwrap .cbtn:hover{border-color:#fff;background:transparent}
/* Abierta se da vuelta: fondo blanco y la campana en oscuro. */
.cwrap .cbtn.on{background:#fff;color:var(--ink,#111113);border-color:#fff}

@media(max-width:640px){
  .cwrap .cbtn{width:38px;height:38px}
}