/* Compact editor workspace: three rails — structure | text | suggestions. */ :root { /* Acento = azul de marca arText. El cromo del editor (cabecera, cabeceras de panel, lienzo) toma el color; el folio blanco destaca encima. */ --insp-primary:#006fc0; --insp-line:#e4e8f0; --insp-line-2:#eef1f6; --insp-muted:#6b7688; --insp-ink:#1a2030; --insp-surface-2:#f5f7fb; --ed-accent:#006fc0; --ed-accent-dark:#005596; --ed-chrome:#006fc0; --ed-chrome-dark:#00558f; --ed-ctx:#7c3aed; --ed-ctx-wash:#f3efff; --ed-rail-head:#eef4fb; --ed-rail-line:#dbe7f4; --ed-active-bg:#eaf3fc; } /* 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 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:#fff; 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 !important; 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 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:#fff; 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:#fff; 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:#fff; 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 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 original_suggestions.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 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:#fff; 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; } /* ---- structure tree ---- */ /* Velo global de arrastre: subir es soltar sobre el editor. */ .editor-dropveil { position:fixed; inset:10px; z-index:140; display:flex; align-items:center; justify-content:center; border:3px dashed var(--ed-accent); border-radius:18px; background:color-mix(in srgb, var(--ed-active-bg) 88%, transparent); pointer-events:none; } .editor-dropveil[hidden] { display:none; } .editor-dropveil-inner { text-align:center; color:var(--ed-accent-dark); } .editor-dropveil-inner svg { width:40px; height:40px; margin-bottom:8px; } .editor-dropveil-inner strong { display:block; font-size:18px; font-weight:800; } .editor-dropveil-inner p { margin:4px 0 0; font-size:13px; color:var(--insp-muted); } /* Línea de ayuda: qué hace este panel, como el «Estructura y contenidos» del sistema anterior. */ .structure-intro { margin:0; padding:9px 14px 11px; color:var(--insp-muted); font:400 12.5px/1.55 var(--font-body); border-bottom:1px solid var(--insp-line-2); } .structure-tree { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:0; display:flex; flex-direction:column; gap:0; } /* Árbol en tres niveles, como un explorador de ficheros / árbol de IDE: indentación limpia con guías finas (línea vertical de 1px por nivel), filas compactas, SIN caja ni lámina rellena por ítem — el activo se marca con un acento fino (barra o borde de color) más un tinte muy sutil, nunca un bloque grande. Ritmo vertical apretado en los tres niveles. 1 · Apartado: fila de una lista desplegable, separada por líneas. 2 · Contenido: fila con barra de acento a la izquierda (gris → azul al activarse), colgada de la guía de indentación del apartado. 3 · Fraseología: lista plana colgada de su propia guía; el resalte es del renglón pulsado, no de todo el bloque. */ .structure-tree-section { flex:0 0 auto; background:transparent; border:0; border-bottom:1px solid var(--ed-rail-line); border-radius:0; overflow:visible; } .structure-tree-section:last-child { border-bottom:0; } /* El apartado activo se marca con un lomo de color y el título en azul, NADA más: la banda tintada a todo lo ancho llenaba el panel de láminas y era lo que más se alejaba del diseño aprobado. */ .structure-tree-section.is-active > .structure-tree-row { background:transparent; box-shadow:inset 3px 0 0 var(--ed-accent); } .structure-tree-row { display:flex; align-items:center; } .structure-tree-toggle { flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:8px 4px 8px 11px; color:var(--insp-ink); text-align:left; background:transparent; border:0; cursor:pointer; transition:background .12s ease; } .structure-tree-toggle:hover { background:rgba(0,111,192,.06); } .structure-tree-section.is-active > .structure-tree-row .structure-tree-toggle:hover, .structure-tree-content.is-active > .structure-tree-row .structure-tree-toggle:hover { background:transparent; } .structure-tree-toggle > svg { flex:0 0 auto; width:14px; height:14px; color:#9aa7b8; transition:transform .18s ease, color .15s ease; } /* Hoja del árbol: lo que no tiene nada dentro no lleva galón, pero conserva su hueco para que los rótulos sigan alineados en columna. */ .structure-tree-leaf { flex:0 0 auto; width:14px; } .structure-tree-row.content-row .structure-tree-leaf { width:12px; } .structure-tree-section.is-active > .structure-tree-row .structure-tree-toggle > svg, .structure-tree-content.is-active > .structure-tree-row .structure-tree-toggle > svg { transform:rotate(90deg); color:var(--ed-accent); } /* :not(.structure-tree-leaf) — imprescindible. Esta regla viste el ENVOLTORIO del rótulo, pero como selector de hijo directo también capturaba el hueco de las ramas sin hijos (que es otro span) y le daba flex:1: el hueco se comía el ancho de la fila y empujaba el texto contra el borde derecho. */ .structure-tree-toggle > span:not(.structure-tree-leaf) { display:flex; min-width:0; flex:1; align-items:center; justify-content:space-between; gap:8px; } .structure-tree-toggle strong { min-width:0; overflow-wrap:anywhere; font:700 13.5px/1.35 var(--font-heading); white-space:normal; } .structure-tree-section.is-active .structure-tree-toggle strong { color:var(--ed-accent-dark); } /* El apartado ya no lleva contador: el número de contenidos no le decía nada a quien escribe (equipo lingüístico, 2026-07-31). Lo único que queda en esta posición es el multiplicador de un contenido que se repite («3×»). */ .structure-tree-toggle small { flex:0 0 auto; padding:0; color:var(--insp-muted); font:700 10.5px/1 var(--font-body); text-align:right; background:transparent; } /* El estado normal no necesita etiqueta: todos los apartados se distribuyen automáticamente. «Sin ubicar» solo aparece después de quitarlos de forma explícita desde el bocadillo lateral. */ .structure-anchor-state { display:inline-flex; align-items:center; gap:4px; font-weight:600 !important; } .structure-anchor-state[hidden] { display:none !important; } .structure-anchor-state::before { content:""; width:6px; height:6px; border-radius:50%; background:#a8b3c1; } .structure-anchor-pin { flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; margin-right:6px; padding:0; color:#7c8999; background:transparent; border:0; border-radius:7px; opacity:0; pointer-events:none; cursor:pointer; transition:opacity .12s ease, color .12s ease, background .12s ease; } .structure-anchor-pin:focus-visible, .structure-tree-section.is-unplaced .structure-anchor-pin { opacity:1; pointer-events:auto; } .structure-anchor-pin:hover { color:var(--ed-accent); background:var(--ed-active-bg); } .structure-anchor-pin svg { width:14px; height:14px; } /* Ocultar/mostrar los apartados del folio. Ya no es un icono suelto en la cabecera del carril: lleva rotulo, porque un simbolo solo no se adivinaba (Sara, 12/08). Ocupa su propia fila porque junto al titulo no cabe. */ /* Ocultar apartados, al PIE del carril: el arbol es `flex:1` y se desplaza, asi que esto queda anclado abajo, separado por un filete. Sin el recuadro azul del estado activo. Lo tuvo mientras encabezaba el panel y ahi era donde molestaba: «queda demasiado visible... no se si se le da demasiada importancia visual» (Sara, 02/09). El estado no se pierde, porque nunca lo llevaba el color: lo dice el propio rotulo, que cambia entre «Ocultar apartados» y «Mostrar apartados», y `aria-pressed` para quien no lo ve. */ .structure-guides-toggle { display:flex; align-items:center; gap:8px; flex:none; width:calc(100% - 24px); margin:0 12px; padding:9px 10px; border:0; border-top:1px solid var(--insp-line-2); border-radius:0; background:transparent; font:inherit; font-size:12px; font-weight:600; text-align:left; color:var(--insp-muted); cursor:pointer; } .structure-guides-toggle svg { flex:none; width:16px; height:16px; } .structure-guides-toggle:hover { color:var(--insp-ink); } .structure-guides-toggle[aria-pressed="false"] { color:#9aa7b8; } /* Insertar (+): solo al posar el cursor sobre SU fila. Dejarlo fijo en las filas activas llenaba el panel de cruces grandes permanentes. */ /* Desplegado animado, como el editor anterior: el contenedor pasa de 0fr a 1fr y el .acc-inner (overflow:hidden) recorta el contenido mientras crece. */ .structure-tree-contents, .structure-tree-phrases { display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s ease; } .structure-tree-contents.is-open, .structure-tree-phrases.is-open { grid-template-rows:1fr; } .structure-tree-contents > .acc-inner, .structure-tree-phrases > .acc-inner { display:flex; flex-direction:column; min-height:0; overflow:hidden; } @media (prefers-reduced-motion: reduce) { .structure-tree-contents, .structure-tree-phrases { transition:none; } } /* Contenidos (nivel 2): SIN lámina ni tarjeta — el envoltorio solo aporta una guía de indentación fina (border-left de 1px) heredera de la fila del apartado, como el conector de un árbol de fichero. El resaltado de fila (hover/activo) es a sangre, igual que en el apartado (nivel 1): un tinte de fondo a todo el ancho de la fila y una franja fina en el borde, no una tarjeta separada con su propio margen y borde de color. Plegado no deja hilo visible: a 0fr colapsa a 0 (recortado por overflow:hidden), el respiro lo dan los márgenes de los propios ítems. */ /* Sin guías verticales: la jerarquía la da la sangría, como en el diseño aprobado. Las líneas de árbol de IDE añadían ruido en un panel de tres niveles cortos. */ /* Los contenidos son una INDICACIÓN de qué va en ese apartado, no ítems que se insertan: en el arText original vivían dentro de un bloque de aviso azul. Aquí eso se traduce en un lavado tenue que enmarca la zona sin dibujar una caja, y en texto de peso normal y tono apagado. Lo que sí se inserta —la fraseología— vuelve al blanco para despegarse de la indicación. */ .structure-tree-contents > .acc-inner { gap:0; padding:2px 0; margin:0; border-left:0; background:#f6fafe; } .structure-tree-contents > .acc-inner > :last-child { margin-bottom:2px; } .structure-tree-content { flex:0 0 auto; } .structure-tree-content .structure-tree-row { border-radius:0; transition:background .12s ease, box-shadow .12s ease; } .structure-tree-content:hover .structure-tree-row { background:rgba(0,111,192,.045); } .structure-tree-content.is-active .structure-tree-row { background:transparent; } .structure-tree-content.is-active .structure-tree-toggle > svg { color:var(--ed-accent); } .structure-tree-row.content-row .structure-tree-toggle { padding:6px 4px 6px 30px; } .structure-tree-row.content-row .structure-tree-toggle > svg { width:12px; height:12px; } .structure-tree-row.content-row .structure-tree-toggle strong { font:400 13px/1.45 var(--font-body); color:var(--insp-muted); } .structure-tree-content.is-active .structure-tree-toggle strong { color:var(--insp-ink); font-weight:600; } /* Fraseología (nivel 3): lista plana colgada de su propia guía fina (sin lámina tintada ni radio grande); cada frase se inserta al pulsarla y solo ESE renglón se resalta al pasar el cursor. */ .structure-tree-phrases > .acc-inner { gap:0; margin:0; padding:0; border-left:0; } .structure-tree-phrases > .acc-inner > :last-child { margin-bottom:3px; } /* Las frases se leen como citas insertables: serif itálica, sangradas bajo su contenido, con el «+» asomando a la derecha solo al pasar el cursor. */ .structure-tree-phrases .phraseology-btn { display:flex; align-items:flex-start; gap:8px; min-height:0; padding:5px 12px 5px 44px; color:#3b4a5e; font:italic 400 13.5px/1.5 var(--ed-doc-font); text-align:left; background:#fff; border:0; border-radius:0; cursor:pointer; transition:background .12s ease, color .12s ease; } .structure-tree-phrases .phraseology-btn:hover { color:var(--ed-accent-dark); background:var(--ed-active-bg); } /* `pre-line`: la fraseología legacy trae saltos con significado (bloques de firma, enumeraciones a)/b)) que el importador convierte de `
` en `\n`. Sin esto el salto se colapsaría y las dos líneas se leerían pegadas. Solo preserva los saltos: el resto del espacio en blanco sigue colapsando. */ .structure-tree-phrases .phraseology-btn span { flex:1; min-width:0; white-space:pre-line; } /* El «+» está SIEMPRE: es lo que distingue una frase insertable de un rótulo que solo se lee. Atenuado en reposo para no gritar en una lista larga, a plena tinta y en círculo al posar el cursor. */ .structure-tree-phrases .phraseology-btn svg { flex:0 0 auto; width:13px; height:13px; margin-top:4px; color:var(--ed-accent); opacity:.5; border-radius:50%; box-shadow:0 0 0 1px transparent; transition:opacity .12s ease, box-shadow .12s ease; } .structure-tree-phrases .phraseology-btn:hover svg, .structure-tree-phrases .phraseology-btn:focus-visible svg { opacity:1; box-shadow:0 0 0 1px currentColor; } /* ---- editor column ---- .agent-editor-frame / .editor-toolbar / .editor-document-card / .rich-editor-surface used to be redeclared here too (pre-"Word-editor" compact layout); removed — the "Word-like" editor block below is now the only owner of those four, deliberately scoped under [data-public-editor] to beat analytics.css's own same-named rules regardless of load order (see the note there). .editor-workbar/.editor-analyze-btn are dead (no longer in the template) and left alone. */ .rich-editor-content { max-width:740px; font-size:calc(16px * var(--editor-zoom,1)); line-height:1.7; } /* Texto de ayuda de las zonas de apartado. En TipTap lo pinta la extension Placeholder (clase is-empty + data-placeholder); en el respaldo, :empty. En ambos es contenido generado por CSS, nunca texto real: el analisis no lo ve. */ .rich-editor-surface .is-empty::before, .rich-editor-surface [data-placeholder]:empty::before { content: attr(data-placeholder); display: block; height: 0; color: #97a5b6; font-family: var(--ed-doc-font); font-style: italic; pointer-events: none; } /* El estado del análisis es un renglón informativo, no una tarjeta: plano, pegado al borde, sin marco propio — deja de leerse como un pegote y de sumar caja al apilamiento del panel. Selectores con el panel delante a propósito: analytics.css (que carga DESPUÉS de este fichero) trae la versión tarjeta del analizador y hay que ganarle por especificidad. */ .editor-suggestions-panel > .editor-report-status { flex:0 0 auto; display:flex; align-items:flex-start; gap:9px; margin:0; padding:9px 14px; background:transparent; border:0; border-bottom:1px solid var(--insp-line-2); border-radius:0; } .editor-suggestions-panel > .editor-report-status > svg { flex:0 0 auto; width:15px; height:15px; margin-top:1px; color:var(--ed-accent); } /* Título y texto en un renglón corrido («Revisión en curso — las recomendaciones…»), no en columnas: informa de pasada, como una línea de estado, sin partir el título en tres líneas. */ .editor-suggestions-panel > .editor-report-status > div { display:block; min-width:0; flex:1; font-size:11.5px; line-height:1.5; } .editor-suggestions-panel > .editor-report-status h3 { display:inline; margin:0 5px 0 0; font-size:12px; font-weight:700; color:var(--insp-ink); } .editor-suggestions-panel > .editor-report-status p { display:inline; margin:0; font-size:11.5px; color:var(--insp-muted); } /* Barra de progreso del análisis. Avanza contra el reloj —no contra las fases, que no son un porcentaje— y se topa en el 95 % mientras no haya informe: una barra llena sin resultado es una mentira. En cola queda indeterminada, con un vaivén, porque todavía no ha empezado a contar nada. */ .analysis-progress { display:block; margin-top:7px; } .analysis-progress-track { display:block; overflow:hidden; height:4px; background:var(--insp-line-2); border-radius:999px; } .analysis-progress-fill { display:block; width:0; height:100%; background:var(--ed-accent); border-radius:999px; transition:width .25s linear; } .analysis-progress small { display:block; margin-top:4px; color:var(--insp-muted); font-size:11px; } .analysis-progress[data-indeterminate] .analysis-progress-fill { width:35%; animation:analysis-progress-wait 1.3s ease-in-out infinite; } @keyframes analysis-progress-wait { 0% { transform:translateX(-100%); } 100% { transform:translateX(300%); } } @media (prefers-reduced-motion: reduce) { .analysis-progress-fill { transition:none; } .analysis-progress[data-indeterminate] .analysis-progress-fill { width:100%; animation:none; opacity:.45; } } /* ---- estrecho: cada carril pasa a ser un cajon sobre el texto ---- */ /* Hasta 1023: móviles y tabletas en vertical. En horizontal la tableta ya entra en la retícula de tres columnas. */ @media (max-width: 1023px) { .public-editor-shell { display:block; min-height:0; } .editor-main-panel { width:100%; } /* Ancho de cajón con una franja de folio a la vista: enseña que hay página debajo y no otra pantalla. Los 22px eran 74 mientras el carril de aplicación se comía 52 de ellos. */ .editor-rail { position:fixed; z-index:60; top:72px; bottom:0; width:min(384px,calc(100vw - 22px)); max-height:none; transition:opacity .18s ease, transform .18s ease; } /* El carril cerrado se aparta; ocultarlo con display:none impediria animar. */ .public-editor-shell:not(.is-structure-open) .editor-structure-rail, .public-editor-shell:not(.is-suggestions-open) .editor-suggestions-rail { display:flex; opacity:0; pointer-events:none; } .editor-structure-rail { left:0; border-radius:0 12px 12px 0; transform:translateX(-105%); } .editor-suggestions-rail { right:0; border-radius:12px 0 0 12px; transform:translateX(105%); } .public-editor-shell.is-structure-open .editor-structure-rail, .public-editor-shell.is-suggestions-open .editor-suggestions-rail { opacity:1; pointer-events:auto; transform:none; } } /* Las reglas de móvil (≤768px) viven todas juntas al final del fichero, en el bloque «modo móvil». Antes había dos capas sueltas a 700px que ya no existen: había tres anchuras de corte (1279 / 760 / 700) para el mismo propósito y las reglas de folio que declaraban se perdían igualmente contra analytics.css por orden de carga. */ /* ===================================================================== El editor es una aplicacion: la cabecera y el pie del sitio se apartan y el editor se queda con la ventana. Se detecta con :has sobre el shell del editor, no con una clase de body: la navegacion htmx (hx-boost) intercambia el contenido pero no los atributos del body, y una clase se quedaria pegada al salir del editor, dejando el menu del sitio oculto. ===================================================================== */ body:has([data-public-editor]) .topbar, body:has([data-public-editor]) .site-footer { display:none; } body:has([data-public-editor]) .shell { max-width:none; padding:0; } body:has([data-public-editor]) .public-editor-shell { gap:0; min-height:100vh; } body:has([data-public-editor]) .editor-rail { border-radius:0; border-top:0; border-bottom:0; } body:has([data-public-editor]) .editor-structure-rail { border-left:0; } body:has([data-public-editor]) .editor-suggestions-rail { border-right:0; } body:has([data-public-editor]) .agent-editor-frame { height:100vh; min-height:100vh; border-radius:0; border-top:0; border-bottom:0; } /* Acompaña a la retícula: donde el carril es columna, va pegado y a toda altura; donde es cajón, solo se ajusta el borde superior. */ @media (min-width: 1024px) { body:has([data-public-editor]) .editor-rail { position:sticky; top:0; height:100vh; } } @media (max-width: 1023px) { body:has([data-public-editor]) .editor-rail { top:0; } } /* ---- el carril de aplicación azul: retirado ---- Vivía aquí una columna de 52px con degradado de marca que se desplegaba al posar el cursor. Se retiró el 2026-08-24, por la revisión del 12/08: «a mí este panel lateral desplegable me resulta poco intuitivo» (Iria), conforme Sara. Lo que llevaba está repartido —ver la nota del `