/* La campanita del portal y el chip del socio, mas grandes.

   Va DESPUES de cabecera.css: reusa el mismo negro de la barra y le pisa los
   tamaños al chip. Es el mismo dibujo que la campanita del panel de
   administracion, a proposito: si las dos pantallas se vieran distintas habria
   que aprender dos cosas para lo mismo.

   QUE ENTRA EN LA CAMPANITA: solo NOVEDADES, cosas que ya pasaron y que el
   socio tiene que saber. Lo que TIENE QUE HACER -la contraseña sin cambiar, el
   perfil incompleto, la instalacion que espera su confirmacion- no vive aca:
   esta en el Inicio, en la celda "Cosas para revisar". El por que esta escrito
   en js/novedades.js. Por eso este panel tiene marca de leido y aquel no.

   ---------------------------------------------------------------------------
   CHOQUE DE NOMBRES: .ccab

   La cabecera de este panel se llama .ccab, y LA CINTA DE FILTROS DE LA
   VIDRIERA DE MAQUINAS TAMBIEN. Son dos cosas que no tienen nada que ver, con
   el mismo nombre de clase.

   catalogo.css se carga DESPUES que este archivo, asi que le ganaba: al panel
   de avisos le entraban el position:sticky, el display:flex y los margenes
   negativos pensados para una cinta que cruza la pantalla. El resultado era el
   que se veia: una franja oscura vacia arriba, el titulo empujado hacia abajo
   y la bajada pegada al costado.

   POR ESO TODAS LAS REGLAS DE LA CABECERA VAN COLGADAS DE .cmenu. Eso las
   vuelve mas especificas que las de catalogo.css y el orden de carga deja de
   importar. Lo correcto de verdad seria renombrar una de las dos clases, pero
   eso toca avisos.js y catalogo.js; esto lo resuelve sin mover el HTML y deja
   anotado por que.

   OJO CON EL !important DE ESTE ARCHIVO. Es el mismo motivo por el que ya lo
   usa cabecera.css con el menu del socio: sitio.css define despues fondos,
   margenes y colores pensados para tarjetas CLARAS. Forzar solo una parte es
   lo que deja estos panales mezclados. */

/* ---------- la barra, un poco mas alta ----------
   Con el chip mas grande adentro, la cinta negra quedaba apretada contra el
   borde. Es la primera cosa que se ve del portal. */
header .wrap.nav{min-height:72px}
header .brand .l{font-size:23px}

/* ---------- EL NUMERO DE VERSION ----------
   El mismo numerito que ya tenia el panel de administracion, ahora tambien
   aca. Sirve para lo mismo: saber de un vistazo si lo que estas mirando es lo
   ultimo que se subio o una copia vieja que quedo guardada en el navegador.
   Sin esto, cuando un cambio "no aparece" no hay forma de distinguir entre un
   deploy que no salio y un navegador que no solto la copia.

   El valor vive en index.html, en la linea VER, y se sube a mano en cada
   deploy. Ojo: el portal NO usa ?v= en los archivos (vercel.json le pide al
   navegador que revalide siempre), asi que este numero es un CARTEL, no un
   mecanismo -- no fuerza nada, solo informa.

   Va apagado a proposito: es una herramienta nuestra, no del socio. Tiene que
   poder leerse cuando se lo busca y no llamar la atencion cuando no. */
.ver{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;
letter-spacing:.04em;color:rgba(255,255,255,.55);margin-right:14px;flex:none}

/* ---------- campanita ---------- */

.cwrap{position:relative;margin-right:12px}

.cbtn{width:42px;height:42px;border-radius:50%;cursor:pointer;
display:flex;align-items:center;justify-content:center;position:relative;
color:#fff;background:transparent;border:1px solid #45454C;
transition:background .16s,border-color .16s}
.cbtn svg{width:20px;height:20px;display:block}
.cbtn:hover{border-color:#fff}
.cbtn.on{background:#fff;color:var(--ink);border-color:#fff}

/* El numero son las SIN LEER, no todas. Una campanita con un 12 permanente
   porque el socio tiene doce novedades viejas no dice nada.
   Rojo sobre la barra negra: se ve de lejos y es el color con el que el socio
   ya asocia "esto es de LASER76". */
.cnum{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;
border-radius:9px;background:var(--red);color:#fff;
font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;
display:flex;align-items:center;justify-content:center;padding:0 4px;
border:2px solid var(--ink)}
.cbtn.on .cnum{border-color:#fff}

.cmenu{position:absolute;right:0;top:calc(100% + 13px);width:348px;
background:#1E1E22 !important;border:1px solid #35353C !important;
border-radius:14px;color:#E6E6EA !important;
box-shadow:0 18px 44px rgba(0,0,0,.45);z-index:90;overflow:hidden;
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .16s,transform .16s,visibility .16s}
.cmenu.abierto{opacity:1;visibility:visible;transform:none}

/* ---------- la cabecera del panel ----------
   Todo colgado de .cmenu para ganarle a la cinta de la vidriera (ver arriba).
   Se apagan explicitamente position, top, display y margin: son justo las
   cuatro que traia de alla y las que dejaban el hueco. */
.cmenu .ccab{position:static !important;top:auto !important;z-index:auto !important;
display:block !important;
margin:0 !important;padding:17px 18px 14px !important;
background:#1E1E22 !important;
border:0 !important;border-bottom:1px solid #34343C !important}

.cmenu .ccab b{display:block !important;margin:0 !important;padding:0 !important;
font-family:"Days One",sans-serif;font-size:15.5px !important;
line-height:1.2 !important;color:#fff !important}

.cmenu .ccab span{display:block !important;margin:4px 0 0 !important;padding:0 !important;
font-size:12.5px !important;line-height:1.4 !important;color:#9A9AA4 !important;
font-weight:400 !important}

/* "Marcar todas": el boton que de verdad se usa cuando se juntaron varias.
   Va discreto en la cabecera y no como un boton mas, para que no compita con
   el de cada novedad. Solo aparece si hay algo sin leer. */
.cmenu .ccab .ctodas{display:inline-block !important;margin-top:9px !important;
padding:0 !important;background:none !important;border:0 !important;
font-size:12px !important;font-weight:600 !important;color:#9A9AA4 !important;
cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cmenu .ccab .ctodas:hover{color:#fff !important}

.clist{max-height:62vh;overflow:auto;padding:8px}

/* ---------- cada novedad, una tarjeta ----------
   ANTES se alternaba el fondo de un aviso al otro, uno oscuro y uno claro, y
   quedaba un cebrado que se leia como si unos avisos fueran mas importantes
   que otros -- y ademas obligaba a tener dos versiones de cada color de texto
   y de cada boton.

   Ahora todos son iguales: la misma tarjeta, un poco mas clara que el fondo
   del panel, con su borde y separadas por el espacio entre ellas. Se cuentan
   igual de rapido y no hay que mantener dos paletas.

   El separador ahora es el AIRE, no una linea: con tarjetas que ya tienen
   borde propio, una raya en el medio es una linea de mas. */
.cav{position:relative;padding:14px 15px !important;margin:0 0 8px !important;
background:#2A2A31 !important;border:1px solid #383840 !important;
border-radius:11px !important}
.cav:last-child{margin-bottom:0 !important}

.cav b{display:block;font-size:14.5px;font-weight:600;color:#fff !important;
line-height:1.3;padding-right:14px}
.cav span{display:block;font-size:12.5px;color:#A6A6B0 !important;
line-height:1.5;margin-top:5px}

/* La fecha. Mono y chica, al pie: una novedad sin fecha deja la pregunta
   "¿cuando fue?", que es justo lo que despues se discute por telefono. */
.cav .cfec{font-family:"IBM Plex Mono",monospace;font-size:10.5px !important;
color:#77777F !important;letter-spacing:.02em;margin-top:8px !important}

/* El punto de "sin leer", arriba a la derecha de la tarjeta. */
.cav .cpt{position:absolute;top:14px;right:14px;width:7px;height:7px;
border-radius:50%;background:var(--red);display:block}

/* LA LEIDA NO DESAPARECE: se apaga. Volver a buscar "que me habian dicho" es
   la mitad de para que sirve tener novedades guardadas. */
.cav.leida{background:#232329 !important;border-color:#2F2F37 !important}
.cav.leida b{color:#B9B9C2 !important;font-weight:500}
.cav.leida span{color:#84848E !important}

/* El boton de la novedad se dibuja aca y no con la clase .btn del sitio: esa
   esta pensada para fondo claro y sobre el panel oscuro quedaba invisible. */
.cbtn2{display:inline-block;margin-top:11px;cursor:pointer;
font-size:13px;font-weight:600;color:#fff !important;
background:transparent !important;border:1px solid #4E4F58;border-radius:8px;
padding:8px 14px;transition:background .16s,border-color .16s}
.cbtn2:hover{background:#3A3B44 !important;border-color:#6E6F7A}
.cav.leida .cbtn2{color:#A6A6B0 !important;border-color:#3C3C45}

.cvacio{padding:18px 15px;font-size:13px;color:#8A8A94 !important;
background:transparent !important;line-height:1.55}

/* ---------- el chip del socio, mas grande ----------
   Antes era mas chico que el del panel de administracion y quedaba perdido
   contra la barra. Ahora entra el nombre y el apellido completos. */
.utrig{padding:7px 15px 7px 8px;gap:11px}
.utrig .av{width:34px;height:34px;font-size:13px}
.utrig .tx b{font-size:14.5px;line-height:1.2}
.utrig .tx span{font-size:10.5px;letter-spacing:.1em}

@media(max-width:640px){
  /* En celular el nombre completo no entra al lado del logo: queda solo la
     inicial y el desplegable, que ahi si lo muestra entero. */
  header .wrap.nav{min-height:60px}
  .utrig .tx{display:none}
  .utrig{padding:6px;gap:0}
  .cwrap{margin-right:8px}
  .cbtn{width:38px;height:38px}
  /* La version se va: en una barra angosta compite con el nombre del socio, y
     el numerito es una herramienta nuestra. Para mirarlo, la compu. */
  .ver{display:none}
  /* El panel no puede colgar de la derecha del boton: se saldria de la
     pantalla. Se ancla a los bordes. */
  .cmenu{position:fixed;left:12px;right:12px;top:66px;width:auto}
}