/* Editor · retícula y carriles: separador, cabeceras, «Analizar», género y pie del carril.
   Troceado de `compact_workspace.css` (lote C3). Carga en `head_extra` de
   editor/editor.html, 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. */
/* Este fichero es el unico dueno de la reticula del editor: las reglas rivales
   se retiraron de analytics.css, asi que aqui no hace falta pelear
   especificidad. El orden estructurar → escribir → revisar viene del arText
   original: el layout es el modelo mental. */
/* La primera columna era el carril de aplicación azul, retirado el 2026-08-24
   (revisión del 12/08). La navegación que llevaba vive ahora en la tira de la
   cinta, que es la barra de aplicación de las tres vistas; la retícula se queda
   con lo que de verdad reparte el ancho: los dos carriles y el folio. */
.public-editor-shell { position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"editor"; gap:12px; width:100%; min-height:calc(100vh - 96px); }
.public-editor-shell .editor-main-panel { grid-area:editor; min-width:0; }
.editor-structure-rail { grid-area:structure; }
.editor-suggestions-rail { grid-area:suggestions; }

/* La retícula de carriles empieza en 1024 y no en 1280 desde el 2026-09-03.
   Una tableta en horizontal —el iPad de 11" mide 1180— caía del lado estrecho
   por 100 píxeles y abría con los dos carriles plegados. Cabe: lo que no cabe
   son los anchos de escritorio, y por eso la banda de tableta declara los
   suyos más abajo. */
@media (min-width: 1024px) {
  /* Ancho de carril redimensionable: variable CSS con el mismo valor por
     defecto que antes; el arrastre del separador solo cambia la variable
     (ver [data-rail-resizer] en editor/public_editor.js), la retícula la sigue. */
  .public-editor-shell.is-structure-open { grid-template-columns:clamp(240px,var(--rail-structure-w,290px),560px) minmax(0,1fr); grid-template-areas:"structure editor"; }
  .public-editor-shell.is-suggestions-open { grid-template-columns:minmax(0,1fr) clamp(240px,var(--rail-suggestions-w,384px),560px); grid-template-areas:"editor suggestions"; }
  .public-editor-shell.is-structure-open.is-suggestions-open { grid-template-columns:clamp(240px,var(--rail-structure-w,290px),560px) minmax(0,1fr) clamp(240px,var(--rail-suggestions-w,384px),560px); grid-template-areas:"structure editor suggestions"; }
  /* top = barra de 64px + 16px de aire: la pagina se desplaza como documento,
     asi que sin offset el carril se metería bajo la barra pegajosa. Altura fija
     y scroll propio, como los carriles del arText original. */
  .editor-rail { position:sticky; top:80px; align-self:start; height:calc(100vh - 96px); }
}

/* ---- carriles ---- */
/* Sin position propio aquí: el carril ya llega posicionado (sticky en
   escritorio, fixed en el cajón estrecho) desde las reglas de breakpoint más
   arriba y más abajo en este fichero; ambos valores sirven igual de bien de
   contenedor de posicionamiento para el separador de redimensionado. */
.editor-rail { display:flex; flex-direction:column; min-height:0; background:var(--bg-card); border:1px solid var(--insp-line); border-radius:12px; overflow:hidden; }
.public-editor-shell:not(.is-structure-open) .editor-structure-rail,
.public-editor-shell:not(.is-suggestions-open) .editor-suggestions-rail { display:none; }
.editor-rail > .editor-structure-panel,
.editor-rail > .editor-suggestions-panel { flex:1; min-height:0; display:flex; flex-direction:column; }

/* Separador de redimensionado (tipo LibreOffice): vive en el borde interior
   del carril, dentro de su caja (nunca a caballo, el carril recorta con
   overflow:hidden). El hilo visible es una franja de 2px centrada; el resto
   del área de 9px es solo zona de agarre, más fácil de acertar con el ratón. */
.rail-resizer {
  position:absolute; top:0; bottom:0; width:9px; z-index:20;
  background:transparent; border:0; padding:0; margin:0; cursor:col-resize; touch-action:none;
}
.rail-resizer::after {
  content:""; position:absolute; top:0; bottom:0; left:50%; width:2px;
  background:transparent; transform:translateX(-50%); border-radius:2px; transition:background .12s ease;
}
.editor-structure-rail > .rail-resizer { right:0; }
.editor-suggestions-rail > .rail-resizer { left:0; }
.rail-resizer:hover::after, .rail-resizer:focus-visible::after { background:var(--ed-rail-line); }
.rail-resizer.is-dragging::after { background:var(--ed-accent); width:3px; }
.rail-resizer.is-collapsing::after { background:#dc2626; }
.rail-resizer:focus-visible { outline:2px solid var(--ed-accent); outline-offset:-2px; border-radius:3px; }
/* Mientras se arrastra, nada de selección de texto ni de interferencia del
   editor rico bajo el puntero (el separador vive fuera del folio, pero el
   drag puede pasar por encima). */
body.is-resizing-rail { cursor:col-resize; user-select:none; }
body.is-resizing-rail .rich-editor-surface,
body.is-resizing-rail iframe { pointer-events:none; }
@media (max-width: 1279px) {
  /* Sin arrastre por debajo de 1280, y por dos motivos distintos según dónde:
     hasta 1023 el carril es un cajón de ancho fijo y no hay nada que arrastrar;
     entre 1024 y 1279 sí es columna, pero el agarre son 9 píxeles y esa banda
     es la de las tabletas, donde se apunta con el dedo. El ancho de esa banda
     lo fija `RAIL_WIDTH_TABLET` y no la mano. */
  .rail-resizer { display:none; }
}
.editor-rail > .editor-structure-panel { overflow:hidden; }
.editor-suggestions-rail [data-unified-suggestion-panel] { flex:1; min-height:0; }

.rail-head { display:flex; align-items:center; gap:8px; padding:10px 8px 10px 14px; background:var(--ed-rail-head); border-bottom:1px solid var(--ed-rail-line); }
/* El rótulo cede antes que el botón: el carril se puede arrastrar hasta 240px y
   «Analizar claridad» es más largo que el «Analizar texto» de antes. Recortar el
   rótulo mantiene la acción entera y la barra en una sola línea. */
.rail-head-title { display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; color:var(--ed-accent-dark); font:650 13.5px/1 var(--font-heading, inherit); }
.rail-head-title i, .rail-head-title svg { flex:0 0 auto; width:16px; height:16px; color:var(--insp-primary); }
/* El rotulo cede antes que el boton, y cuando cede lo dice: sin esto el
   corte era seco —«Recomendac»— y parecia un fallo de maquetacion. Con el
   carril de tableta a 300px es el caso normal, no el excepcional. El texto
   necesita su propio <span> porque el contenedor es flex y ahi
   `text-overflow` no alcanza al nodo suelto. */
.rail-head-title > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-head-tools { margin-left:auto; display:flex; align-items:center; gap:2px; }
/* margin-left:auto de .rail-collapse: sigue haciendo falta donde va suelto
   (cabecera de sugerencias, sin .rail-head-tools); dentro del grupo no tiene
   espacio libre que ocupar, así que ahí es un no-op inocuo. */
.rail-collapse { margin-left:auto; }
.rail-collapse { display:grid; place-items:center; width:32px; height:32px; border:0; background:transparent; border-radius:9px; color:var(--insp-muted); cursor:pointer; }
.rail-collapse:hover { background:var(--insp-surface-2); color:var(--insp-ink); }
.rail-collapse svg { width:16px; height:16px; }

/* Pestanas para devolver un carril cerrado. */
.rail-reopen { position:fixed; z-index:45; top:50%; display:grid; place-items:center; width:34px; height:44px; padding:0; color:var(--insp-muted); background:var(--bg-card); border:1px solid var(--insp-line); box-shadow:0 8px 24px rgba(15,23,42,.12); cursor:pointer; transform:translateY(-50%); transition:color .15s ease, background .15s ease; }
.rail-reopen:hover { color:var(--insp-primary); background:var(--insp-surface-2); }
.rail-reopen svg { width:17px; height:17px; }
/* Pegada al borde de la ventana: con el carril azul retirado ya no hay nada a
   su izquierda de lo que asomar. */
.rail-reopen-left { left:0; border-left:0; border-radius:0 11px 11px 0; }
.rail-reopen-right { right:0; border-right:0; border-radius:11px 0 0 11px; }
.public-editor-shell.is-structure-open .rail-reopen-left,
.public-editor-shell.is-suggestions-open .rail-reopen-right { display:none; }

/* «Analizar texto» vive en la cabecera del panel, con casa fija: la acción
   siempre a la vista (la cabecera es pegajosa) y sin renglón propio que
   apile otra barra. Primario cuando aún no hay informe; con él, se degrada
   a secundario («Volver a analizar», is-secondary). */
.rail-analyze-btn { display:inline-flex; flex:0 0 auto; align-items:center; gap:6px; min-height:30px; padding:0 12px; color:var(--text-inverse); background:var(--ed-accent); border:1px solid transparent; border-radius:9px; font:650 12px var(--font-heading, inherit); cursor:pointer; box-shadow:0 3px 9px rgba(0,111,192,.25); transition:background .15s ease, box-shadow .15s ease; white-space:nowrap; }
.rail-analyze-btn:hover { background:var(--ed-accent-dark); box-shadow:0 4px 11px rgba(0,85,150,.3); }
.rail-analyze-btn svg { width:14px; height:14px; }
.rail-analyze-btn.is-secondary { color:var(--ed-accent); background:var(--bg-card); border-color:var(--insp-line); box-shadow:none; font-weight:600; }
.rail-analyze-btn.is-secondary:hover { background:var(--insp-surface-2, #f5f7fb); box-shadow:none; }
/* Estado de carga: botón deshabilitado y con el icono girando mientras se
   analiza, para que se note que la acción está en marcha. */
.rail-analyze-btn.is-loading, .rail-analyze-btn:disabled { cursor:progress; background:var(--ed-accent-dark); box-shadow:none; opacity:.9; }
.rail-analyze-btn.is-loading svg, .ribbon-btn.is-loading svg { animation:ed-spin .8s linear infinite; }
.ribbon-btn.is-loading { cursor:progress; }
/* En «Descargar como» gira el icono de descarga, no el caret del menú. */
.ribbon-menu-btn.is-loading .ribbon-menu-caret { animation:none; }
/* Y si el menú se reabre durante la descarga, la fila del formato en curso
   también se declara ocupada. */
.ribbon-menu-item.is-loading { cursor:progress; opacity:.72; }
.ribbon-menu-item.is-loading svg { animation:ed-spin .8s linear infinite; }
@keyframes ed-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rail-analyze-btn.is-loading svg, .ribbon-btn.is-loading svg, .ribbon-menu-item.is-loading svg { animation:none; } }

/* El género rotula el panel de estructura (es su plantilla), con el acceso a
   cambiarlo al lado. */
.rail-genre { display:flex; flex:0 0 auto; align-items:center; gap:8px; padding:9px 10px 9px 14px; border-bottom:1px solid var(--insp-line-2); }
.rail-genre-id { display:flex; min-width:0; flex:1; flex-direction:column; gap:1px; overflow:hidden; }
.rail-genre-id strong { min-width:0; color:var(--insp-ink); font:700 13.5px/1.25 var(--font-heading, inherit); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-genre-id small { min-width:0; color:var(--insp-muted); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-genre-change { display:inline-flex; flex:0 0 auto; align-items:center; gap:5px; min-height:28px; padding:3px 8px; color:var(--insp-primary); background:transparent; border:0; border-radius:7px; font:600 11.5px var(--font-heading, inherit); cursor:pointer; }
.rail-genre-change:hover { background:var(--insp-surface-2); }
.rail-genre-change svg { width:13px; height:13px; }

/* Los paneles ya no llevan chapa propia: la pone el carril. */
.editor-structure-panel { padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
/* El carril de sugerencias desplaza como un todo: al bajar por la lista, la
   cabecera del documento y «Analizar» se van, y la fila de control con los
   chips se queda pegada arriba (`.sg-sticky` del panel compartido). */
.editor-suggestions-panel { display:flex; flex-direction:column; min-height:0; gap:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.editor-suggestions-panel > .rail-head,
.editor-suggestions-panel > .editor-report-status { flex:0 0 auto; }
/* La cabecera acompaña: pegajosa sobre el desplazamiento del panel, para que
   «Analizar / Volver a analizar» no se vaya con el scroll. */
.editor-suggestions-panel > .rail-head { position:sticky; top:0; z-index:6; }
/* Y la fila de chips se pega DEBAJO de ella, no en el mismo borde. Las dos
   estaban clavadas en `top:0` con la cabecera por encima (z-index 6 contra 3),
   así que al desplazar la lista los chips se metían bajo la cabecera y se
   veían cortados por arriba (Guillermo, 2026-08-03; pasaba en escritorio y en
   móvil). La altura de la cabecera la publica editor/public_editor.js, que la mide:
   cambia con el idioma, con el ancho del carril y con el rótulo del botón.
   El selector repite `.sg-panel` para ganarle en especificidad al `top:0` de
   03-suggestions-panel.css, que es hoja compartida y se carga DESPUÉS. */
.editor-suggestions-panel .sg-panel .sg-sticky { top:var(--rail-head-h, 46px); }
/* Aquí el que desplaza es el panel entero, y encima de la lista se quedan
   pegadas DOS cosas: la cabecera del carril y la banda del panel. Las dos
   tapan, así que las dos entran en el destino de cualquier desplazamiento que
   traiga una tarjeta a la vista; sin esto la recomendación elegida aterrizaba
   debajo de ellas y se veía a medias (Guillermo, 2026-08-04). Ninguna mide lo
   mismo siempre: la del carril cambia con el idioma y el ancho (la mide
   editor/public_editor.js), y la del panel con los chips (la mide el propio panel). */
.editor-suggestions-panel .sg-panel { --sg-reveal-top:calc(var(--rail-head-h, 46px) + var(--sg-sticky-h, 0px) + var(--sg-air)); }
/* Pie del panel: el ciclo del análisis termina donde nace. «Ver informe de
   claridad» vive bajo las recomendaciones que lo producen, pegado al borde
   inferior, y nace apagado con el mismo contrato que la pastilla del carril:
   existir ya enseña que el informe está a un análisis de distancia. Es UNO
   solo desde 2026-08-03: la descarga se mudó a la cabecera del propio informe,
   que es donde ya se sabe qué se está descargando. */
.rail-report-foot { position:sticky; bottom:0; display:flex; flex:0 0 auto; gap:8px; margin-top:auto; padding:9px 10px; background:var(--ed-rail-head, #fff); border-top:1px solid var(--insp-line-2); }
.rail-report-open { display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:1; min-height:32px; padding:0 10px; border:1px solid var(--insp-line); border-radius:9px; background:var(--bg-card); color:var(--ed-accent); font:600 12px/1.2 var(--font-heading, inherit); text-decoration:none; cursor:pointer; }
.rail-report-open:hover { background:var(--ed-active-bg); border-color:var(--ed-accent); }
.rail-report-open svg { flex:0 0 auto; width:14px; height:14px; }
/* Apagado pero no mudo: sin pointer-events:none, el clic llega y abre el
   aviso de openReportGate (por qué no hay informe y cómo tenerlo). */
.rail-report-open[aria-disabled="true"] { color:var(--insp-muted); background:transparent; border-color:var(--insp-line-2); cursor:default; opacity:.75; }
.rail-report-open[aria-disabled="true"]:hover { background:transparent; border-color:var(--insp-line-2); }
.rail-report-open span { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* `overflow:visible` es imprescindible: con un antecesor recortado, el bloque
   pegajoso se ancla a esa caja (que no desplaza) y nunca se queda arriba. */
.editor-suggestions-panel > [data-unified-suggestion-panel] { display:block; flex:0 0 auto; height:auto; min-height:0; overflow:visible; }
.editor-suggestions-panel .sg-panel .sg-list { flex:none; overflow:visible; }