/**
 * Estilos del widget, con prefijo "oceal-" para no chocar con el tema de
 * jspui. No importa tipografías externas a propósito: hereda la fuente de
 * la página en la que se incrusta. Los colores están en variables para
 * poder ajustarlos rápido a la identidad visual del sitio.
 */
/* El tooltip vive fuera de #oceal-map-root: también necesita las variables. */
#oceal-map-root,
#oceal-tooltip {
  --oceal-fill: #b7cdd1;
  --oceal-fill-hover: #d9793f;
  --oceal-fill-active: #1f6f6a;
  --oceal-stroke: #ffffff;
  --oceal-text: #1e2a2c;
  --oceal-text-muted: #5c6d6a;
  --oceal-border: #dcd6c4;
  --oceal-surface: #ffffff;
  --oceal-accent: #1f6f6a;
}

#oceal-map-root {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  #oceal-map-root { grid-template-columns: 1fr; }
}

#oceal-map-container { line-height: 0; }
#oceal-map-container svg { width: 100%; height: auto; display: block; overflow: visible; }

#oceal-map-container path.pais {
  fill: var(--oceal-fill);
  stroke: var(--oceal-stroke);
  stroke-width: 0.6;
  cursor: pointer;
  transition: fill 0.12s ease;
}
#oceal-map-container path.pais:hover { fill: var(--oceal-fill-hover); }
#oceal-map-container path.pais.activo { fill: var(--oceal-fill-active); }
#oceal-map-container path.pais.sin-datos { cursor: default; }
#oceal-map-container path.pais.sin-datos:hover { fill: var(--oceal-fill); }

.oceal-badges,
.oceal-badge {
  pointer-events: none; /* que el badge no tape el hover/clic del país debajo */
}
.oceal-badge-circle {
  fill: var(--oceal-accent);
  stroke: var(--oceal-surface);
  stroke-width: 0.6;
}
.oceal-badge-text {
  fill: #fff;
  font-weight: 600;
  text-anchor: middle;
  font-family: inherit;
}

.oceal-tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--oceal-text);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); /* se despega de cualquier color de país */
  font-size: 12.5px;
  line-height: 1.4;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 0.08s ease;
  z-index: 20;
  white-space: nowrap;
}
.oceal-tooltip--show { opacity: 1; }

#oceal-panel {
  border: 1px solid var(--oceal-border);
  border-radius: 10px;
  background: var(--oceal-surface);
  padding: 16px 18px;
  min-height: 220px;
}
.oceal-panel-header { display: block; margin-bottom: 14px; color: inherit; text-decoration: none; }
.oceal-panel-header--link:hover .oceal-country-name,
.oceal-panel-header--link:focus .oceal-country-name { color: var(--oceal-accent); text-decoration: underline; }
.oceal-panel-header--link .oceal-country-name::after { content: " \2192"; font-weight: 400; }
.oceal-country-name { display: block; font-size: 19px; font-weight: 600; margin: 0 0 4px; color: var(--oceal-text); }
.oceal-count-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.oceal-count-n { font-size: 22px; font-weight: 600; color: var(--oceal-accent); }
.oceal-count-label { font-size: 12px; color: var(--oceal-text-muted); }

.oceal-items {
  list-style: none; margin: 0; padding: 0 4px 0 0;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 500px; overflow-y: auto; /* que el panel no crezca más que el mapa */
}
.oceal-items li {
  border: 1px solid var(--oceal-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.02);
}
.oceal-item-title { font-size: 13.5px; color: var(--oceal-text); text-decoration: none; }
.oceal-item-title:hover { text-decoration: underline; }

.oceal-more { margin: 12px 0 0; font-size: 13px; }
.oceal-more a { color: var(--oceal-accent); }

#oceal-others {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--oceal-text-muted);
}
#oceal-others:empty { display: none; }
#oceal-others a { color: var(--oceal-accent); }
.oceal-others-label { font-weight: 600; }

.oceal-empty, .oceal-error { font-size: 13px; color: var(--oceal-text-muted); }
.oceal-error { color: #b23b3b; }

.oceal-skeleton {
  height: 13px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.06);
  margin-bottom: 8px;
  animation: oceal-pulse 1.1s ease-in-out infinite;
}
@keyframes oceal-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .oceal-skeleton { animation: none; } }

#oceal-status-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--oceal-text-muted);
  border-top: 1px solid var(--oceal-border);
  padding-top: 10px;
  margin-top: 4px;
}
#oceal-status-bar[hidden] { display: none; } /* display:flex anula el [hidden] nativo */
#oceal-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--oceal-accent); display: inline-block; margin-right: 6px;
}
#oceal-status-dot.oceal-status-dot--stale { background: var(--oceal-fill-hover); }
#oceal-refresh-btn {
  font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid var(--oceal-border); background: var(--oceal-surface);
  border-radius: 6px; padding: 5px 10px;
}
#oceal-refresh-btn:hover { border-color: var(--oceal-accent); color: var(--oceal-accent); }