/* =========================================================
   BARRA SUPERIOR
   Título, botones principales y la cuenta atrás de los
   2 minutos que hay que esperar entre publicaciones.
   ========================================================= */

.barra{position:sticky;top:0;z-index:20;display:flex;flex-direction:column;gap:14px;
  padding:18px 22px;background:var(--grad-barra);color:var(--barra-texto);
  border-bottom:1px solid var(--barra-velo-mas);
  box-shadow:0 14px 40px rgba(24,20,70,.34)}
.barra__cabecera{display:flex;align-items:center;gap:12px}
.barra__marca{margin-right:auto}
.barra__titulo{font-family:var(--display);font-weight:800;font-size:1.28rem;letter-spacing:-.015em;
  text-shadow:0 1px 12px rgba(0,0,0,.22)}
.barra__sub{font-family:var(--texto);font-size:.6rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--barra-sub);margin-top:3px}
.barra__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* ---------- Cuenta atrás tras publicar ---------- */
.espera{position:relative;display:flex;align-items:center;gap:6px}
.espera__reloj{font-family:var(--texto);font-size:.78rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--barra-texto);opacity:.85}
.espera__ayuda{width:18px;height:18px;flex:none;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--barra-borde-mas);background:transparent;
  color:var(--barra-texto);font-family:inherit;font-size:.68rem;font-weight:800;
  line-height:1;cursor:pointer;padding:0}
.espera__ayuda:hover{background:var(--barra-velo-mas)}
.espera__globo{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:min(320px,78vw);
  background:var(--solido);color:var(--tinta);border:1px solid var(--linea-fuerte);
  border-radius:var(--radio);padding:16px 18px;box-shadow:var(--sombra-alta);
  font-family:var(--texto);font-size:.78rem;line-height:1.5;text-align:left}
.espera__globo b{display:block;margin-bottom:6px;font-size:.82rem}
.espera__globo p{margin:0 0 8px}

/* En móvil la barra se pliega y la cuenta atrás queda a la izquierda, así
   que el globo anclado a la derecha se salía de la pantalla y no se podía
   leer. En pantallas estrechas se muestra centrado, como una ventana
   emergente sobre un fondo oscuro. */
@media(max-width:600px){
  .espera__globo{position:fixed;top:50%;left:50%;right:auto;
    transform:translate(-50%,-50%);width:min(340px,calc(100vw - 32px));
    max-height:80vh;overflow:auto;z-index:80}
  .espera__globo::before{content:'';position:fixed;inset:0;z-index:-1;
    background:rgba(0,0,0,.55)}
}

/* En móvil la marca y los botones necesitan menos aire y algo menos
   de cuerpo, para que la barra no se coma media pantalla. */
@media(max-width:600px){
  .barra{padding:14px 15px;gap:12px}
  .barra__titulo{font-size:1.12rem}
  .barra__acciones{gap:8px}
  .barra__acciones .btn{padding:8px 13px;font-size:.78rem}
}
/* Pantallas muy estrechas (360 px y menos): los botones de acción
   ocupan el ancho a partes iguales en vez de desbordar. */
@media(max-width:380px){
  .barra__acciones{display:grid;grid-template-columns:1fr 1fr}
  .barra__acciones .btn{width:100%}
  .barra__acciones .espera{grid-column:1 / -1}
}