/* Panel de sugerencias · cabecera del carril, franja de IA y subnivel.
   Troceado de `original_suggestions.css` (lote C3). Carga en `head_extra` de
   editor/editor.html y api_tester/analytics.html, detrás de los módulos 02-editor-* y
   ANTES del núcleo: ante una regla del núcleo con la misma especificidad,
   pierde. El orden entre módulos lo fija tests/css_manifest.py. */
/* Con informe, la cabecera del carril lleva «Volver a revisar» y «Clarificar»:
   al ancho por defecto (384 px) el rótulo se quedaba en «Recome…» (C30 F). Si
   rótulo y acciones no caben en una línea, las acciones bajan enteras a la
   siguiente en vez de comerse el rótulo; con el carril ancho siguen en una. La
   altura de la cabecera ya se mide (`--rail-head-h`) para los chips pegajosos. */
.editor-suggestions-panel > .rail-head { flex-wrap: wrap; row-gap: 6px; }
.editor-suggestions-panel > .rail-head > .rail-head-title { flex: 1 0 auto; max-width: 100%; }

/* ── Franja de IA ──────────────────────────────────────────────────────────
   Rediseño de la clarificación, versión 7, N1 (`editor/ai_band.js`; RD15).
   Entre la cabecera del carril y los chips, a todo el ancho: la entrada a la
   revisión con IA, con su título y una línea de estado sin cifras. Dentro del
   subnivel la misma franja son las migas. El índigo solo dice «esto es IA»
   (RD18): aquí no hay ningún botón de acción. */
.ai-band-host { flex: 0 0 auto; }
.ai-band-host[hidden] { display: none; }
.ai-band {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  color: #312e81;
  background: #f1f0fe;
  border: 0;
  border-bottom: 1px solid #dcd9fb;
  border-radius: 0;
  font: inherit;
  text-align: left;
}
button.ai-band { cursor: pointer; transition: background 0.15s ease; }
button.ai-band:hover { background: #e9e7fd; }
.ai-band-mark { display: inline-flex; }
.ai-band-mark .artext-mark { width: 22px; height: 22px; }
.ai-band-text { display: grid; gap: 1px; min-width: 0; }
.ai-band-title { color: #3730a3; font: 650 13px/1.3 var(--font-heading, inherit); }
.ai-band-status { display: flex; align-items: center; gap: 6px; min-width: 0; color: #544f9e; font-size: 11.5px; font-weight: 500; line-height: 1.3; }
.ai-band-dot { display: none; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--ai, #4338ca); }
.ai-band[data-ai-band-state="ready"] .ai-band-dot,
.ai-band[data-ai-band-state="working"] .ai-band-dot { display: inline-block; }
.ai-band[data-ai-band-state="working"] .ai-band-dot { animation: ai-band-pulse 1.2s ease-in-out infinite; }
@keyframes ai-band-pulse { 50% { opacity: 0.3; } }
.ai-band-go { display: inline-grid; place-items: center; color: var(--ai, #4338ca); }
/* Las migas: «‹ Recomendaciones / Párrafo a párrafo» y, con un paso abierto, su
   rótulo como tercer nivel. Se quedan bajo la cabecera al desplazar el subnivel.
   Los dos rótulos largos ceden con puntos suspensivos antes que desbordar; el
   del paso se queda con lo que sobra. */
.ai-band-host:has(> .ai-band.is-in) { position: sticky; top: var(--rail-head-h, 46px); z-index: 5; }
.ai-band.is-in { grid-template-columns: auto auto minmax(0, auto) auto minmax(0, 1fr); gap: 6px; padding-block: 9px; font-size: 12.5px; }
.ai-band-steps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: -4px -6px;
  padding: 4px 6px;
  color: var(--ai, #4338ca);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: 600 12.5px/1.3 var(--font-body, inherit);
  cursor: pointer;
}
.ai-band-steps:hover { background: #e4e2fc; }
.ai-band-steps:focus-visible { outline: 2px solid var(--ai, #4338ca); outline-offset: -2px; }
.ai-band-steps .artext-mark { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px; }
.ai-band-steps > span:last-child,
.ai-band-here[data-ai-band-trail] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-band-back {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: -4px -6px;
  padding: 4px 6px;
  color: var(--ai, #4338ca);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: 600 12.5px/1.3 var(--font-body, inherit);
  cursor: pointer;
}
.ai-band-back:hover { background: #e4e2fc; }
.ai-band-sep { color: #5f5ba8; }
.ai-band-here { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: #3730a3; font: 650 13px/1.3 var(--font-heading, inherit); }
.ai-band-here .artext-mark { width: 18px; height: 18px; border-radius: 6px; }
.ai-band-here > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.ai-band:focus-visible,
.ai-band-back:focus-visible { outline: 2px solid var(--ai, #4338ca); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  button.ai-band { transition: none; }
  .ai-band[data-ai-band-state="working"] .ai-band-dot { animation: none; }
}
/* El subnivel ocupa el sitio del panel, que se oculta sin desmontarse: chips,
   recomendación abierta y desplazamiento siguen ahí al volver. */
.ai-level { flex: 0 0 auto; }
.ai-level[hidden] { display: none; }
.editor-suggestions-panel[data-rail-level="ai"] > [data-unified-suggestion-panel],
.editor-suggestions-panel[data-rail-level="ai"] > .editor-report-status,
.editor-suggestions-panel[data-rail-level="ai"] > .rail-report-foot { display: none; }
/* Lo que recibe el foco con el teclado no queda debajo de la cabecera y las
   migas pegadas ni del pie del paso (N7). */
.editor-suggestions-panel[data-rail-level="ai"] { scroll-padding-top: calc(var(--rail-head-h, 46px) + 48px); scroll-padding-bottom: 72px; }
@media (max-width: 768px) {
  /* «‹ Recomendaciones» y el nivel de la lista se pulsan con el dedo: 44 px sin
     engordar las migas. */
  .ai-band-back,
  .ai-band-steps { min-height: 44px; margin-block: -10px; }
  /* En el móvil las migas no caben ni recortadas: se desplazan con el dedo y
     cada rótulo se lee entero. */
  .ai-band.is-in { display: flex; overflow: auto hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ai-band.is-in::-webkit-scrollbar { display: none; }
  .ai-band.is-in > * { flex: 0 0 auto; }
  .ai-band-steps > span:last-child,
  .ai-band-here[data-ai-band-trail] { overflow: visible; text-overflow: clip; }
}

/* «Clarificar con IA» en la pestaña Herramientas de la cinta: la marca con la
   etiqueta en vez de icono. Al pasar por encima, como los demás botones de la
   cinta: el índigo solo marca «esto es IA» (RD18). */
.ribbon-btn.ribbon-clarify-btn[disabled] .artext-mark { opacity: 0.5; }