.eo-communications-center {
  margin: 28px 0;
  padding: 28px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,250,252,.82));
  box-shadow: 0 22px 70px rgba(15, 23, 42, .10);
  backdrop-filter: blur(16px);
  box-sizing: border-box;
  overflow: hidden;
}

.eo-communications-center *,
.eo-communications-center *::before,
.eo-communications-center *::after { box-sizing: border-box; }

.eo-comm-placeholder,
.eo-comm-empty {
  padding: 20px;
  border: 1px dashed rgba(15, 23, 42, .18);
  border-radius: 20px;
  background: rgba(255,255,255,.62);
  color: rgba(15, 23, 42, .64);
}

.eo-comm-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.eo-comm-head h3 {
  margin: 3px 0 8px;
  color: #09152f;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.1;
  letter-spacing: 0;
}

.eo-comm-head p { max-width: 650px; margin: 0; color: rgba(15, 23, 42, .66); }

.eo-comm-head > strong {
  display: inline-flex;
  min-width: 108px;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: #0b1b3f;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}

.eo-comm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.eo-comm-kpis > div { min-height: 94px; padding: 16px; border: 1px solid rgba(15, 23, 42, .08); border-radius: 20px; background: rgba(255,255,255,.72); }
.eo-comm-kpis span { display: block; margin-bottom: 8px; color: rgba(15, 23, 42, .58); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.eo-comm-kpis strong { display: block; color: #09152f; font-size: 22px; line-height: 1.15; word-break: break-word; }

.eo-comm-list { display: grid; gap: 14px; }
.eo-comm-card { border: 1px solid rgba(15, 23, 42, .08); border-radius: 22px; background: rgba(255,255,255,.84); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.eo-comm-card.is-unread { border-color: rgba(201, 151, 45, .42); box-shadow: 0 14px 40px rgba(201, 151, 45, .12); }
.eo-comm-card.eo-comm-urgent { border-color: rgba(220, 38, 38, .42); }
.eo-comm-card.has-error { border-color: rgba(220, 38, 38, .62); }

.eo-comm-toggle { display: grid; width: 100%; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.eo-comm-toggle:focus-visible { outline: 3px solid rgba(201, 151, 45, .38); outline-offset: -4px; }
.eo-comm-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 16px; background: rgba(31, 91, 160, .10); color: #1f5ba0; font-weight: 900; }
.eo-comm-important .eo-comm-icon { background: rgba(201, 151, 45, .16); color: #9a6a04; }
.eo-comm-urgent .eo-comm-icon { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.eo-comm-toggle span:nth-child(2) { min-width: 0; }
.eo-comm-toggle em { display: block; margin-bottom: 4px; color: rgba(15, 23, 42, .48); font-size: 12px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.eo-comm-toggle strong { display: block; color: #09152f; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.eo-comm-toggle small { display: block; margin-top: 5px; color: rgba(15, 23, 42, .62); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.eo-comm-toggle b { padding: 8px 12px; border-radius: 999px; background: rgba(15, 23, 42, .07); color: rgba(15, 23, 42, .64); font-size: 12px; white-space: nowrap; }
.eo-comm-card.is-unread .eo-comm-toggle b { background: #c9972d; color: #fff; }

.eo-comm-body { display: none; padding: 0 18px 20px 76px; color: rgba(15, 23, 42, .74); line-height: 1.65; overflow-wrap: anywhere; }
.eo-comm-card.is-open .eo-comm-body { display: block; }
.eo-comm-body p:first-child { margin-top: 0; }
.eo-comm-cta { display: inline-flex; margin-top: 14px; padding: 11px 16px; border-radius: 999px; background: #0b1b3f; color: #fff; font-weight: 800; text-decoration: none; }

@media (max-width: 920px) { .eo-comm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .eo-communications-center { padding: 20px; border-radius: 22px; }
  .eo-comm-head { flex-direction: column; }
  .eo-comm-kpis { grid-template-columns: 1fr; }
  .eo-comm-toggle { grid-template-columns: 38px minmax(0, 1fr); }
  .eo-comm-icon { width: 38px; height: 38px; border-radius: 14px; }
  .eo-comm-toggle b { grid-column: 2; justify-self: flex-start; }
  .eo-comm-body { padding-left: 18px; }
}