/* Editor · vista «Nuevo documento».
   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. */
/* =====================================================================
   VISTA «NUEVO DOCUMENTO»
   Tercera vista del área principal, hermana del editor y del informe. Ocupa
   la pantalla porque elegir el género es la decisión que manda sobre todo lo
   demás —estructura, recomendaciones, glosarios— y merece el mismo espacio
   que le da el catálogo de fuera, no un cuadro de 640px.
   Retícula propia con cabecera y pie fijos y un cuerpo que se desplaza: la
   acción no puede quedarse debajo del pliegue cuando hay once géneros
   desplegados.
   ===================================================================== */
/* Misma mudanza que la vista de informe: hermana del folio dentro del marco y
   creciendo en el hueco, sin altura de ventana propia. */
.editor-start { display:none; flex:1 1 auto; flex-direction:column; min-width:0; min-height:0; background:var(--insp-surface-2); }
.public-editor-shell[data-editor-view="nuevo"] .editor-start { display:flex; }
.public-editor-shell[data-editor-view="nuevo"] .editor-import-notice,
.public-editor-shell[data-editor-view="nuevo"] .editor-document-card,
.public-editor-shell[data-editor-view="nuevo"] .editor-statusbar,
.public-editor-shell[data-editor-view="nuevo"] .editor-report-view,
.public-editor-shell[data-editor-view="nuevo"] .editor-rail,
.public-editor-shell[data-editor-view="nuevo"] .rail-reopen { display:none; }
/* Igual que en la vista de informe: los selectores repiten las clases de
   apertura de carril para empatar en especificidad con las reglas de la
   retícula, que si no dejarían columnas para carriles que ya no se pintan. */
.public-editor-shell.is-structure-open.is-suggestions-open[data-editor-view="nuevo"],
.public-editor-shell.is-structure-open[data-editor-view="nuevo"],
.public-editor-shell.is-suggestions-open[data-editor-view="nuevo"],
.public-editor-shell[data-editor-view="nuevo"] { grid-template-columns:minmax(0,1fr); grid-template-areas:"editor"; }

.start-head { display:flex; align-items:flex-start; gap:16px; flex:0 0 auto; padding:22px 26px 18px; background:var(--bg-card); border-bottom:1px solid var(--insp-line); }
.start-head-id { flex:1; min-width:0; }
.start-head-id h2 { margin:4px 0 3px; font-size:21px; font-weight:800; color:var(--insp-ink); }
.start-head-id p { margin:0; font-size:13px; color:var(--insp-muted); }
.start-resume { display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; min-height:36px; padding:8px 14px; color:var(--ed-accent-dark); background:var(--ed-active-bg); border:1px solid var(--ed-rail-line); border-radius:9px; font:700 12.5px var(--font-heading, inherit); cursor:pointer; }
.start-resume:hover { background:var(--bg-card); }
.start-resume[hidden] { display:none; }
.start-resume svg { width:15px; height:15px; }

.start-body { display:flex; align-items:flex-start; gap:38px; flex:1; min-height:0; overflow:auto; padding:22px 26px 26px; }
/* El borde por el que queda contenido se desvanece (editor/start.js pone las
   clases). Sin esa señal, la tarjeta que la cabecera o el pie cortan a ras se
   lee como algo roto y no como algo que sigue (Guillermo, 2026-08-03). Solo
   donde hay más: arriba del todo y abajo del todo no hay velo. */
.start-body.has-top-more { -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 20px); mask-image:linear-gradient(to bottom, transparent 0, #000 20px); }
.start-body.has-bottom-more { -webkit-mask-image:linear-gradient(to top, transparent 0, #000 20px); mask-image:linear-gradient(to top, transparent 0, #000 20px); }
.start-body.has-top-more.has-bottom-more { -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); }
.start-main { flex:1; min-width:0; }
.start-main > * { max-width:1040px; }
/* La columna de marca: el logotipo de arText llenando el vacío de la derecha
   en pantallas grandes. Pegajosa para acompañar el desplazamiento del paso 1;
   por debajo del corte, no existe. */
.start-aside { display:none; }
@media (min-width: 1480px) {
  .start-aside { position:sticky; top:8vh; display:grid; flex:0 0 clamp(300px, 24vw, 420px); place-items:center; padding:40px 10px; }
}
.start-aside-card { display:flex; flex-direction:column; align-items:center; text-align:center; }
.start-aside-card img { width:min(320px, 90%); height:auto; opacity:.96; }
.start-step + .start-step { margin-top:30px; }
.start-step[hidden] { display:none; }
.start-step-label { display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; margin:0 0 13px; }
.start-step-label span { color:var(--insp-ink); font:800 13px var(--font-heading, inherit); letter-spacing:.1em; text-transform:uppercase; }
.start-step-label em { color:var(--insp-muted); font:600 12.5px var(--font-body); font-style:normal; }
/* Los dos grupos del paso 1: los ámbitos especializados en acordeón y el
   lenguaje claro aparte, como en /ambitos-especializados y /lenguaje-claro.
   Mezclarlos aquí contradiría a la web, donde son dos páginas distintas. */
.start-group + .start-group { margin-top:20px; }
.start-group[hidden] { display:none; }
.start-group-title { margin:0 0 9px; color:var(--insp-muted); font:800 10.5px var(--font-heading, inherit); letter-spacing:.1em; text-transform:uppercase; }
/* El acordeón y las tarjetas de género son los de landing.css: aquí solo se
   ajusta lo que cambia de significado. Pulsar YA NO navega —selecciona—, y
   por eso hay estado elegido, y no solo hover. */
.editor-start .field-genre { width:100%; font:inherit; text-align:left; cursor:pointer; }
.editor-start .field-genre.is-chosen { border-color:var(--ed-accent); background:var(--ed-active-bg); box-shadow:0 0 0 1px var(--ed-accent) inset; }
.editor-start .field-genre:focus-visible { outline:2px solid var(--ed-accent); outline-offset:2px; }
.editor-start .field-genre-current { flex:0 0 auto; padding:2px 7px; color:var(--ed-accent-dark); background:var(--ed-active-bg); border-radius:999px; font:800 9.5px var(--font-heading, inherit); letter-spacing:.07em; text-transform:uppercase; }
/* En un móvil el nombre del género se parte en varias líneas y empuja: la
   pastilla «Documento actual» no encoge y se salía de la tarjeta, pintada sobre
   el panel (Guillermo, 2026-08-03; con «Trabajo de fin de grado (TFG) en
   derecho administrativo» se iba 90 px fuera a 360 px de ancho).
   La fila envuelve, así que cuando ya no hay sitio los distintivos bajan a su
   propia línea en vez de escaparse. Y el nombre tiene SUELO: con `min-width:0`
   a secas, flexbox prefiere estrujar el nombre —llegó a medir 29 px— antes que
   envolver la fila, y entonces el texto desbordaba su caja y se pintaba encima
   del logotipo de lenguaje claro (Guillermo, 2026-08-03, segunda vuelta). Con
   8 em de suelo la fila envuelve cuando toca, y `overflow-wrap` parte la
   palabra que aun así no quepa en vez de dejarla salir. */
.editor-start .field-genre { flex-wrap:wrap; }
.editor-start .field-genre-name { min-width:8em; overflow-wrap:anywhere; }
.editor-start .field-genre.is-chosen .field-genre-current { background:var(--bg-card); }

/* El paso «cómo empiezas», con el empaque de una decisión de verdad
   (Guillermo, 2026-07-31: parecía pequeñito al lado del paso 1): tarjetas
   más grandes, icono en azulejo y tipografía a la altura de los acordeones. */
.start-origins { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; max-width:780px; }
.start-origin { display:flex; align-items:center; gap:15px; padding:20px 22px; text-align:left; background:var(--bg-card); border:1.5px solid var(--insp-line); border-radius:14px; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.start-origin:hover { border-color:var(--ed-accent); background:var(--ed-active-bg); }
.start-origin.is-chosen { border-color:var(--ed-accent); background:var(--ed-active-bg); box-shadow:0 0 0 1px var(--ed-accent) inset; }
.start-origin:focus-visible { outline:2px solid var(--ed-accent); outline-offset:2px; }
.start-origin svg { flex:0 0 auto; width:46px; height:46px; padding:12px; color:var(--ed-accent); background:var(--ed-active-bg); border-radius:12px; }
.start-origin.is-chosen svg { background:var(--bg-card); }
.start-origin-text { display:flex; flex-direction:column; gap:4px; min-width:0; }
.start-origin-text strong { font-size:15.5px; font-weight:800; color:var(--insp-ink); }
.start-origin-text small { font-size:12.5px; line-height:1.5; color:var(--insp-muted); }
@media (prefers-reduced-motion: reduce) { .start-origin { transition:none; } }

.start-file-chip { display:flex; align-items:center; gap:10px; max-width:640px; margin-top:12px; padding:11px 13px; background:var(--ed-active-bg); border:1px solid var(--ed-rail-line); border-radius:12px; }
.start-file-chip[hidden] { display:none; }
.start-file-chip svg { flex:0 0 auto; width:17px; height:17px; color:var(--ed-accent); }
.start-file-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ed-accent-dark); font-size:12.5px; font-weight:800; }
.start-file-chip small { flex:1; min-width:0; color:var(--insp-muted); font-size:11px; }
.start-file-chip button { display:grid; place-items:center; flex:0 0 auto; width:26px; height:26px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--insp-muted); cursor:pointer; }
.start-file-chip button:hover { background:var(--bg-card); color:var(--insp-ink); }
.start-file-chip button svg { width:14px; height:14px; color:currentColor; }
/* El motivo de que no haya pastilla, en el hueco de la pastilla. Mismo rojo que
   la barra de estado del editor (.editor-file-status.is-error), que es donde
   este mismo mensaje sale cuando esa barra se ve; aquí no se recorta a una
   línea porque nombra el archivo y su tamaño. */
.start-file-error { max-width:640px; margin:12px 0 0; padding:11px 13px; color:#b42318; background:#fef3f2; border:1px solid #fecdca; border-radius:12px; font-size:12.5px; line-height:1.4; }
.start-file-error[hidden] { display:none; }

/* Pie: lo que va a pasar, escrito al lado del botón que lo hace. El aviso
   lleva su remedio dentro (descargar antes), porque mandar al usuario a
   buscarlo en otro menú mientras se le avisa de una pérdida es dejarlo solo. */
.start-foot { display:flex; align-items:center; gap:18px; flex:0 0 auto; padding:14px 26px; background:var(--bg-card); border-top:1px solid var(--insp-line); }
.start-foot-say { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.start-summary { margin:0; min-height:17px; font-size:12.5px; color:var(--insp-muted); }
/* El aviso de que empezar en blanco reemplaza lo abierto se lee como una nota,
   no como una alarma: el ámbar y el triángulo se retiraron el 2026-08-10
   (revisión de Iria, punto 5). El botón de descargar sigue ahí. */
.start-warn { display:flex; align-items:center; gap:8px; margin:0; font-size:12.5px; color:var(--ink-2, #4b5563); }
.start-warn[hidden] { display:none; }
.start-download { flex:0 0 auto; padding:3px 9px; color:var(--ed-accent-dark); background:transparent; border:1px solid var(--ed-rail-line); border-radius:7px; font:700 11.5px var(--font-heading, inherit); cursor:pointer; }
.start-download:hover { background:var(--ed-active-bg); }
.start-confirm { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; min-height:40px; padding:10px 20px; color:var(--text-inverse); background:var(--ed-accent); border:0; border-radius:10px; font:800 13.5px var(--font-heading, inherit); cursor:pointer; }
.start-confirm:hover:not([disabled]) { background:var(--ed-accent-dark); }
.start-confirm[disabled] { color:var(--insp-muted); background:var(--insp-line-2); cursor:default; }
.start-confirm:focus-visible { outline:2px solid var(--ed-accent-dark); outline-offset:2px; }
.start-confirm svg { width:16px; height:16px; }