/* Principal only. Outside the scrollable history; no OAuth simulation. */
.salo-calendar {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 14px;
  border-bottom: 1px solid var(--linea, #dedbd5);
  background: var(--papel, #fff);
  color: var(--tinta, #262626);
  font-family: inherit;
}
.salo-calendar > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 5px 8px;
  border: 1px solid var(--linea, #dedbd5);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.salo-calendar > summary::-webkit-details-marker { display: none; }
.salo-calendar > summary::after { content: "+"; margin-left: auto; font-size: 19px; font-weight: 400; }
.salo-calendar[open] > summary::after { content: "−"; }
.salo-calendar > summary:focus-visible { outline: 2px solid #ba252d; outline-offset: 2px; }
.salo-calendar > summary:hover { border-color: #ba252d; }
.salo-calendar img { flex: 0 0 22px; object-fit: contain; background: white; border-radius: 3px; padding: 2px; box-sizing: content-box; }
.salo-calendar small { display: block; font-size: 12px; font-weight: 400; margin-top: 2px; }
.salo-calendar-explanation { max-height: min(170px, 24dvh); overflow-y: auto; padding: 0 8px; }
.salo-calendar-explanation p { margin: 10px 0; font-size: 13px; line-height: 1.5; }
.salo-calendar [hidden] { display: none !important; }
.salo-calendar-consent { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; line-height: 1.4; }
.salo-calendar-consent input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: #ba252d; }
.salo-calendar button { min-height: 44px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--linea, #777); background: #ba252d; color: white; font: inherit; font-size: 13px; cursor: pointer; margin: 8px 0; }
.salo-calendar button:disabled { opacity: .6; cursor: default; }
.salo-calendar button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* The reminder panel needs room for permission state and the reader's list.
   Scoped selector: Calendar's existing compact panel remains unchanged. */
[data-salomon-recordatorios] .salo-calendar-explanation {
  max-height: min(430px, 55dvh);
}
[data-salomon-recordatorios] ul {
  padding-left: 20px;
  margin: 10px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
[data-salomon-recordatorios] li + li { margin-top: 8px; }
.salo-push-offer {
  box-sizing: border-box; max-width: 100%; margin: 8px 0 16px;
  padding: 14px; border: 1px solid var(--linea, #dedbd5);
  border-radius: 10px;
  background: var(--papel, #fff); color: var(--tinta, #262626);
  font: inherit; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere;
}
.salo-push-offer p { margin: 0 0 10px; }
.salo-push-offer [data-offer-message] { margin: 8px 0 0; font-size: 12px; }
.salo-push-offer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.salo-push-offer button {
  min-height: 44px; padding: 9px 12px; border: 1px solid #ba252d;
  border-radius: 8px; background: #ba252d; color: #fff;
  font: inherit; cursor: pointer;
}
.salo-push-offer [data-offer-dismiss] { background: transparent; color: inherit; border-color: currentColor; }
.salo-push-offer button:disabled { opacity: .6; cursor: default; }
.salo-push-offer button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.salo-push-offer [hidden] { display: none !important; }
@media (max-width: 400px) {
  .salo-calendar { padding: 6px 10px; }
  .salo-calendar > summary { font-size: 13px; gap: 8px; }
}
@media (prefers-color-scheme: dark) {
  .salo-calendar { background: #1b1b1b; color: #efefed; border-color: #414141; }
  .salo-calendar > summary { border-color: #505050; }
  .salo-push-offer { background: #1b1b1b; color: #efefed; border-color: #505050; }
}

/* Principal: two compact connections, one bounded popover, no stacked panels
   stealing the thread's height. Native details remains keyboard-accessible. */
.salo-connections {
  position: relative; z-index: 3; display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 8px; padding: 8px 12px; flex: 0 0 auto;
  border-bottom: 1px solid var(--caja-borde,#ddd);
}
.salo-connections > .salo-calendar { min-width: 0; padding: 0; border: 0; }
.salo-connections .salo-calendar > summary { height: 100%; box-sizing: border-box; gap: 6px; font-size: 12px; }
.salo-connections .salo-calendar > summary > span { min-width: 0; overflow-wrap: anywhere; }
.salo-connections .salo-calendar > summary small { font-size: 12px; }
.salo-connection-short { display:none; }
@media(max-width:700px) {
  .salo-connections .salo-connection-long { display:none; }
  .salo-connections .salo-connection-short { display:inline; }
  .salo-connections .salo-calendar > summary small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .salo-connections { padding:6px 12px; }
}
.salo-connections .salo-calendar-explanation {
  position: absolute; top: 100%; left: 8px; right: 8px;
  max-height: min(320px, calc(var(--burbuja-ventana,100dvh) * .45));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 12px; border: 1px solid var(--caja-borde,#ddd); border-radius: 12px;
  background: var(--papel,#fff); color: var(--tinta,#252523);
  box-shadow: 0 8px 24px #0002;
}
@media(prefers-color-scheme:dark) {
  .salo-connections .salo-calendar-explanation { background:#1b1b1b; color:#efefed; border-color:#505050; }
}