/* Panel de sugerencias · peticiones de IA de hoy y su sitio en la barra de estado.
   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. */
/* Peticiones de IA de hoy (plan-limites-uso L08c). Discreta mientras hay
   margen: el tono solo cambia con poca cuota (ámbar) o sin ella (gris). */
.ai-quota-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-card, #fff);
  color: var(--text-main, #334155);
  font: 600 11.5px/1 inherit;
  white-space: nowrap;
  cursor: pointer;
}
.ai-quota-pill svg { width: 13px; height: 13px; color: var(--focus-ring, #006fc0); }
.ai-quota-pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ai-quota-pill .ai-quota-short { display: none; }
.ai-quota-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success, #10b981); }
.ai-quota-pill.is-low .ai-quota-dot { background: var(--warning); }
.ai-quota-pill.is-out .ai-quota-dot { background: var(--text-muted, #94a3b8); }
@media (max-width: 700px) {
  .ai-quota-pill .ai-quota-long { display: none; }
  .ai-quota-pill .ai-quota-short { display: inline; }
}
/* La forma larga aprieta la barra de estado cuando la columna central es
   estrecha (a 1440 px con los dos carriles abiertos mide unos 770 px): el zoom
   se salía y el «100 %» se cortaba (C30 F). La barra se mide a sí misma, porque
   su ancho depende de los carriles y no de la ventana; por debajo de lo que
   cabe, la forma corta. El texto largo sigue en el `title` y en el detalle. La
   parte derecha no cede: la que se recorta, con elipsis, es la izquierda. */
.editor-statusbar { container: editor-statusbar / inline-size; }
.statusbar-right { flex-shrink: 0; }
/* Si aun así falta sitio, cede antes el aviso de cambios que el recuento. */
.statusbar-left > .statusbar-dirty { flex-shrink: 50 !important; }
.statusbar-left > [data-word-count] { flex-shrink: 0.001; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container editor-statusbar (max-width: 899px) {
  .ai-quota-pill .ai-quota-long { display: none; }
  .ai-quota-pill .ai-quota-short { display: inline; }
}
/* Con la barra estrecha (a 1366 y 1280 px con los dos carriles abiertos mide
   unos 690 y 605 px) lo que cede es la cifra del zoom: el deslizador y los
   botones siguen, la etiqueta de idioma que repite la del corrector se
   retira, y el aviso de cambios conserva al menos «Texto editado»
   (C30c). Por debajo de 1280 px la barra ya se desplaza y no se
   oculta nada. */
.statusbar-left > .editor-file-status:empty { display: none; }
@media (min-width: 1280px) {
  @container editor-statusbar (max-width: 719px) {
    .editor-zoom-label { display: none; }
    /* La etiqueta de idioma repite la del corrector ortográfico: cede también. */
    .statusbar-right > .statusbar-lang { display: none; }
    /* Del recuento quedan las palabras; los caracteres, en el título. */
    [data-word-count] > .word-count-chars { display: none; }
    /* El estado del corrector ya lo dicen el color y `aria-checked`. */
    .statusbar-spell > .statusbar-spell-state { display: none; }
    /* Si ni así cabe, el recuento se recorta por la cola. El aviso encoge
       primero (su factor aplasta al del recuento); el recuento lleva factor 1
       porque, por debajo de 1, el navegador no reparte todo lo que falta. */
    .statusbar-left > .statusbar-dirty { min-width: 7.4em; flex-shrink: 100000 !important; }
    .statusbar-left > [data-word-count] { flex-shrink: 1; }
  }
}
.ai-quota-pop {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-main, #0f172a);
}
.ai-quota-pop h4 { margin: 0 0 2px; font-size: 13.5px; font-weight: 650; }
.ai-quota-sub { margin: 0 0 12px; color: var(--text-muted, #64748b); font-size: 12px; }
.ai-quota-row-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.ai-quota-row-head b { font-variant-numeric: tabular-nums; }
.ai-quota-bar { height: 6px; border-radius: 999px; background: var(--border-color, #e2e8f0); overflow: hidden; }
.ai-quota-bar i { display: block; height: 100%; border-radius: inherit; background: var(--focus-ring, #006fc0); }
.ai-quota-bar.is-low i { background: var(--warning); }
.ai-quota-bar.is-out i { background: var(--text-muted, #94a3b8); }
.ai-quota-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  font-size: 12.5px;
}
.ai-quota-alert svg { flex: none; width: 16px; height: 16px; color: #d97706; margin-top: 1px; }
.ai-quota-note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-muted, #64748b);
  font-size: 12px;
}
.ai-quota-note a { color: var(--focus-ring, #006fc0); font-weight: 600; text-decoration: none; }