/* Namespaced para no chocar con JNews */
/* Contenedor general */
.ctxr-wrap {
  margin: 24px 0 12px;
}

/* Tabs: una sola línea, responsivo y con scroll horizontal suave en xs */
.ctxr-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #EEF1F7; /* tono suave similar a captura */
  overflow-x: auto;
  white-space: nowrap;   /* no-wrap para mantener una línea */
  -webkit-overflow-scrolling: touch;
}

/* Texto inicial */
.ctxr-lead {
  font-weight: 600;
  color: #1F2A44;
}

/* Botones */
.ctxr-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font-weight: 700;
  color: #3A56C5; /* azul estilo captura */
  padding: 2px 2px;
  cursor: pointer;
}

.ctxr-tab[aria-selected="true"] {
  text-decoration: underline;
}

/* Separador fino vertical */
.ctxr-sep {
  width: 1px;
  height: 18px;
  background: rgba(31,42,68,0.25);
  display: inline-block;
}

/* Panel */
.ctxr-panel {
  margin-top: 12px;
}

.ctxr-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 8px 24px rgba(31,42,68,0.06);
  border: 1px solid rgba(31,42,68,0.08);
}

.ctxr-body[data-state="loading"]::before {
  content: attr(data-loading);
  opacity: 0.7;
}

.ctxr-generated ul {
  margin: 0 0 8px 18px;
  padding: 0;
}

.ctxr-generated p {
  margin: 0 0 8px 0;
}

/* Micro-ajustes móviles */
@media (max-width: 420px) {
  .ctxr-tabs { gap: 14px; padding: 8px 12px; }
  .ctxr-card { padding: 14px; }
}