/*
 * El carrusel discreto de ejemplos de conversación (F-031 S5g, 2026-10-22). Sin fondo propio, borde fino y poco alto:
 * lo discreto es el tamaño, no un gris claro; el texto va con el color de texto de la página. Solo variables de la página
 * que lo acoge (con respaldo): sirve igual en el tema claro y en el oscuro. Nada se desplaza de lado (fundido de opacidad).
 */
.ejemplos {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  margin: 10px 0;
  padding: 8px 12px;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.35));
  border-radius: 12px;
  background: transparent;
  color: var(--text, inherit);
  font-size: 13.5px;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
}
.ejemplos[hidden] { display: none !important; }
.ejemplos *, .ejemplos *::before, .ejemplos *::after { box-sizing: border-box; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.ejemplos p { margin: 0; }
.ejemplos .ej-cab { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 2px 8px; }
.ejemplos .ej-rotulo { flex: 1 1 0; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted, #6b7280); }

/* Todas las tarjetas en la misma celda: la franja toma el alto de la más larga y no salta al cambiar. */
.ejemplos .ej-tarjetas { display: grid; }
.ejemplos .ej-tarjeta {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.ejemplos .ej-tarjeta.activa { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s; }
.ejemplos .ej-quien { font-weight: 600; }
.ejemplos .ej-tu { display: block; width: 100%; padding: 1px 0; margin: 0; text-align: left; font: inherit; color: var(--text, inherit); background: transparent; border: 0; }
.ejemplos button.ej-tu { cursor: pointer; border-radius: 6px; }
.ejemplos button.ej-tu:hover .ej-frase { text-decoration: underline; }
.ejemplos .ej-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; color: var(--text, inherit); }
.ejemplos .ej-prox { display: inline-block; padding: 0 8px; border: 1px solid var(--border, rgba(127, 127, 127, 0.5)); border-radius: 999px; font-size: 12px; font-weight: 600; }

.ejemplos .ej-controles { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 6px; margin-left: auto; flex: none; }
.ejemplos .ej-ctl {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--text, inherit);
  background: transparent;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.5));
  border-radius: 8px;
  cursor: pointer;
}
.ejemplos .ej-ctl:hover { border-color: var(--accent, currentColor); }
.ejemplos .ej-contador { font-size: 12px; color: var(--muted, #6b7280); padding: 0 4px; }
.ejemplos .ej-codigo { margin-top: 2px; font-size: 12.5px; color: var(--text, inherit); }
.ejemplos button:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .ejemplos .ej-tarjeta, .ejemplos .ej-tarjeta.activa { transition: none; }
}

/* En la conversación vacía: centrado bajo el menú, estrecho y sin estorbar en pantallas bajas (móvil en horizontal). */
.vacio .ejemplos { margin: 10px auto 4px; max-width: 520px; text-align: left; }
@media (max-height: 519px) { .vacio .ejemplos { display: none; } }