/* =====================================================================
   BLOQUE 5 — Mi informe semanal (Ajustes) y aviso de Gmail en Mis
   conexiones. Va después de bloque4.css (usa sus tokens --b4-*). Muy
   visual, poco texto, centrado; Noche y Día; movimiento solo si el
   sistema lo permite. 390 / 768 / 1280 px sin desbordes.
   ===================================================================== */
.b5-informe .section-head{text-align:center; justify-content:center;}
.b5-informe .section-head > div{width:100%;}

.b5-hero{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:18px 16px 16px; margin:0 0 12px; border-radius:var(--b4-r);
  background:linear-gradient(160deg, var(--b4-az-bg), transparent 70%), var(--surface);
  border:1px solid var(--line);
}
.b5-hero-ico{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:var(--b4-az); color:#fff; box-shadow:0 10px 24px -12px var(--b4-az);
}
.b5-hero-ico .ico-set{width:32px; height:32px; stroke-width:1.8;}
.b5-hero-cuando{margin:2px 0 0; display:flex; align-items:baseline; gap:8px; justify-content:center; line-height:1;}
.b5-hero-cuando strong{font-size:1.5rem; font-weight:800;}
.b5-hero-cuando span{font-size:1.5rem; font-weight:800; color:var(--b4-ro-ink);}

.b5-estado{
  margin:4px 0 0; display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:6px 14px; border-radius:999px; font-size:.82rem; font-weight:700; line-height:1.3;
  overflow-wrap:anywhere;
}
.b5-estado:empty{display:none;}
.b5-estado::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none;}
.b5-ok{background:var(--b4-ok-bg); color:var(--b4-ok-ink);}
.b5-warn{background:var(--b4-am-bg); color:var(--b4-am-ink);}
.b5-off{background:var(--b4-track); color:var(--ink-soft);}
.b5-listo{background:var(--b4-ro-bg); color:var(--b4-ro-ink);}

.b5-switch{margin-bottom:12px;}

.b5-acciones{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.b5-btn{
  min-height:52px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; text-align:center; white-space:normal; line-height:1.2;
}
.b5-btn-ico{display:inline-grid; place-items:center; flex:none;}
.b5-btn-ico .ico-set{width:20px; height:20px;}
.b5-btn:disabled{opacity:.65; cursor:progress;}
.b5-destacar{box-shadow:0 0 0 3px var(--b4-ro-bg), 0 0 0 1px var(--b4-ro);}

@media (max-width:560px){
  .b5-acciones{grid-template-columns:1fr;}
  .b5-hero-cuando strong, .b5-hero-cuando span{font-size:1.3rem;}
}

/* Aviso en Mis conexiones → fila de Gmail */
.b5-aviso-gmail{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:6px;
  padding:8px 10px; border-radius:12px; background:var(--b4-am-bg); color:var(--b4-am-ink);
  font-size:.82rem; font-weight:700; line-height:1.35;
}
.b5-aviso-gmail[hidden]{display:none;}
.b5-aviso-txt{display:inline-flex; align-items:flex-start; gap:6px; min-width:0;}
.b5-aviso-gmail .ico-set{width:16px; height:16px; flex:none; margin-top:1px;}
.b5-aviso-gmail .b5-reconectar{min-height:36px; padding:6px 14px; font-size:.8rem;}

@media (prefers-reduced-motion:no-preference){
  .b5-destacar{animation:b5-latido 2.4s ease-in-out infinite;}
  @keyframes b5-latido{
    0%,100%{box-shadow:0 0 0 3px var(--b4-ro-bg), 0 0 0 1px var(--b4-ro);}
    50%{box-shadow:0 0 0 7px var(--b4-ro-bg), 0 0 0 1px var(--b4-ro);}
  }
}