/* El atributo hidden siempre gana sobre display de los componentes. */
[hidden]{display:none!important}
/* Yalemo — asistente (de diseno/yalemo/pantallas/asistente.html) */
html,body{height:100%}
body{display:flex;flex-direction:column;overflow:hidden}
.app-top{flex:none;display:flex;align-items:center;gap:var(--y-s-4);height:64px;padding:0 var(--y-s-6);background:#fff;border-bottom:1px solid var(--y-linea)}
.app-top .marca img{height:32px}
.app-top__titulo{display:flex;align-items:center;gap:10px;padding-left:var(--y-s-4);margin-left:var(--y-s-2);border-left:1px solid var(--y-linea);font-weight:600}
.app-top__titulo .muted{font-weight:500}
.app-top__acc{margin-left:auto;display:flex;align-items:center;gap:var(--y-s-2)}
.avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--y-cobalto-50);color:var(--y-cobalto-900);border:0;cursor:pointer}
.avatar svg{width:22px;height:22px}
.app{flex:1;min-height:0;display:grid;grid-template-columns:minmax(420px,520px) 1fr}
/* chat */
.chat{display:flex;flex-direction:column;min-height:0;background:#fff;border-right:1px solid var(--y-linea)}
.chat__head{flex:none;display:flex;align-items:center;gap:12px;padding:var(--y-s-4) var(--y-s-6) var(--y-s-3)}
.chat__head img{width:40px;height:40px}
.chat__head strong{display:block;font-family:var(--y-font-titulos);font-size:1.0625rem;line-height:1.2}
.chat__head small{color:var(--y-tinta-2);font-size:var(--y-t-small)}
.chat__head .btn{margin-left:auto;min-height:44px;padding:0 12px;font-size:.9375rem}
.progreso{flex:none;height:6px;margin:0 var(--y-s-6);background:var(--y-linea);border-radius:99px;overflow:hidden}
.progreso span{display:block;height:100%;width:90%;background:var(--y-cobalto);border-radius:99px}
.log{flex:1;min-height:0;overflow:auto;-webkit-mask-image:linear-gradient(transparent 0,#000 20px);mask-image:linear-gradient(transparent 0,#000 20px);padding:var(--y-s-6);display:flex;flex-direction:column;gap:var(--y-s-4)}
.msg{display:flex;gap:10px;max-width:88%}
.msg__av{flex:none;width:32px;height:32px;margin-top:2px}
.msg p{padding:12px 16px;border-radius:18px;line-height:1.5}
.msg--bot p{background:var(--y-papel);border:1px solid var(--y-linea);border-top-left-radius:6px}
.msg--yo{align-self:flex-end}
.msg--yo p{background:var(--y-cobalto);color:#fff;border-top-right-radius:6px}
.pista{display:block;margin-top:6px;font-size:var(--y-t-small);color:var(--y-tinta-2)}
.opciones{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0 42px}
.compositor{flex:none;display:flex;gap:10px;align-items:flex-end;padding:var(--y-s-4) var(--y-s-6) var(--y-s-5);border-top:1px solid var(--y-linea)}
.compositor textarea{flex:1;resize:none;min-height:52px;max-height:140px}
.compositor .btn{height:52px;width:52px;padding:0;border-radius:var(--y-r-md)}
/* vista previa */
.vista{display:flex;flex-direction:column;min-height:0;background:#EEF1F8}
.vista__head{flex:none;display:flex;align-items:center;gap:12px;padding:var(--y-s-4) var(--y-s-8)}
.vista__head h2{font-size:1.25rem}
.estado{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;background:var(--y-exito-50);color:var(--y-exito);font-weight:600;font-size:.8125rem}
.estado::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.vista__papel{flex:1;min-height:0;overflow:auto;padding:var(--y-s-2) var(--y-s-8) var(--y-s-8)}
.oficio{width:100%;max-width:640px;margin:0 auto;background:#fff;box-shadow:var(--y-sombra-hoja);border-radius:4px;padding:56px 60px 52px;font-family:var(--y-font-oficio);font-size:13.5px;line-height:1.55;color:#1d1d1d}
.oficio p{margin:0 0 12px}
.oficio .der{text-align:right}
.oficio .centro{text-align:center}
.oficio .destino{margin:22px 0 18px;font-weight:700;line-height:1.45}
.oficio .cuerpo{text-align:justify}
.oficio .firma{margin-top:30px}
.oficio .linea-firma{width:240px;margin:44px auto 6px;border-top:1px solid #1d1d1d}
.oficio .ccp{margin-top:28px;font-size:11.5px}
.ajustes{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:var(--y-s-4) var(--y-s-8);background:#fff;border-top:1px solid var(--y-linea)}
.ajustes__txt{font-weight:600;margin-right:4px}
.ajustes__txt small{display:block;font-weight:500;color:var(--y-tinta-2);font-size:var(--y-t-small)}
.descarga{flex:none;display:flex;align-items:center;gap:var(--y-s-4);padding:var(--y-s-4) var(--y-s-8) var(--y-s-5);background:#fff}
.descarga .small{color:var(--y-tinta-2)}
.tabs{display:none}
.solo-movil{display:none}
@media (max-width:959px){
  .app-top{height:56px;padding:0 var(--y-s-3) 0 var(--y-s-4)}
  .app-top .marca img{content:url(../img/yalemo-simbolo.svg);height:36px;width:36px}
  .app-top__titulo{border:0;padding:0;margin:0;font-size:.9375rem}
  .app-top__acc .solo-escritorio{display:none}
  .app{display:flex;flex-direction:column}
  .tabs{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:var(--y-s-3) var(--y-s-4) 0;padding:4px;background:var(--y-cobalto-50);border-radius:var(--y-r-md)}
  .tabs button{min-height:44px;border:0;border-radius:10px;background:transparent;font:600 .9375rem var(--y-font-texto);color:var(--y-tinta-2);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
  .tabs button[aria-selected="true"]{background:#fff;color:var(--y-cobalto-900);box-shadow:var(--y-sombra-1)}
  .tabs .punto{width:8px;height:8px;border-radius:50%;background:var(--y-mandarina)}
  .chat,.vista{flex:1;border:0}
  .chat[hidden],.vista[hidden]{display:none}
  .chat__head{padding:var(--y-s-3) var(--y-s-4) var(--y-s-2)}
  .chat__head img{width:36px;height:36px}
  .progreso{margin:0 var(--y-s-4)}
  .log{padding:var(--y-s-4)}
  .msg{max-width:92%}
  .msg p{font-size:.9375rem;padding:10px 14px}
  .opciones{margin-left:0}
  .compositor{padding:var(--y-s-3) var(--y-s-4) var(--y-s-4)}
  .vista__head{padding:var(--y-s-3) var(--y-s-4)}
  .vista__head h2{font-size:1.0625rem}
  .vista__papel{padding:var(--y-s-1) var(--y-s-4) var(--y-s-4)}
  .oficio{padding:26px 22px;font-size:9.5px;line-height:1.5}
  .oficio p{margin-bottom:8px}
  .oficio .destino{margin:14px 0 12px}
  .oficio .linea-firma{width:150px;margin-top:28px}
  .oficio .ccp{font-size:8.5px;margin-top:16px}
  .ajustes{padding:var(--y-s-3) var(--y-s-4);gap:8px;display:grid;grid-template-columns:1fr 1fr}
  .solo-movil{display:inline}.descarga .solo-escritorio{display:none}
  .ajustes__txt{display:none}
  .chip{justify-content:center;padding:0 10px}
  .descarga{padding:var(--y-s-2) var(--y-s-4) var(--y-s-4);flex-direction:column;gap:6px}
  .descarga .btn{width:100%}
}

/* ===================== integración con app.js (contenido generado) ===================== */
.app-top__nav{display:flex;align-items:center;gap:var(--y-s-2)}
.app-top__nav .pill{text-decoration:none}
a.avatar{text-decoration:none}
.msg p{white-space:pre-wrap;word-wrap:break-word}
/* v2.3.7 (QA G2): un número largo sin espacios se parte dentro de la burbuja (antes se salía del chat a 320 px) */
.msg p{overflow-wrap:anywhere}
/* v2.3.7 (QA G3): «Oficio No. <40 caracteres>» no se sale del papel (300–312 px) */
#paper p{overflow-wrap:anywhere}
.msg--nota{align-self:center;max-width:100%}
.msg--nota p{background:var(--y-aviso-50);border:1px solid var(--y-aviso);color:var(--y-tinta);font-size:var(--y-t-small)}
.typing{display:inline-flex;gap:4px;padding:4px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--y-cobalto);opacity:.35;animation:y-parpadeo 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes y-parpadeo{50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.7}}
/* El compositor aloja lo que pide cada paso: opciones, campos o caja de texto */
.compositor{flex-direction:column;align-items:stretch;max-height:46vh;overflow:auto}
.compositor:empty{display:none}
.compositor .opciones{margin:0}
.compositor .chip{min-height:48px;text-decoration:none;text-align:left;line-height:1.2}
.compositor .chip small{display:block;font-size:.8125rem;color:var(--y-tinta-2);font-weight:400;margin-top:2px}
.compositor .chip svg{width:18px;height:18px}
.form{display:flex;flex-direction:column;gap:var(--y-s-3);width:100%}
.form .campo{margin-bottom:0}
.form--texto textarea.input{resize:vertical;min-height:72px;max-height:180px}
.row{display:flex;gap:var(--y-s-2);align-items:center;flex-wrap:wrap}
.row--end{justify-content:flex-end}
.chip:disabled{opacity:.45;cursor:not-allowed}
.chip:disabled:hover{background:#fff;border-color:var(--y-borde-campo)}
/* Vista previa: estado vacío y hoja */
.vista__head .muted{margin-left:auto}
.vista__vacia{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--y-s-2);text-align:center;padding:var(--y-s-8)}
.vista__vacia img{width:200px;height:auto;margin-bottom:var(--y-s-3)}
.vista__vacia .muted{max-width:26rem}
.vista__privacidad{flex:none;padding:0 var(--y-s-8) var(--y-s-4);background:#fff}
.oficio .membrete{text-align:center;border-bottom:2px solid #333;padding-bottom:8px;margin-bottom:18px}
.oficio .membrete b{display:block;font-size:1.1em;text-transform:uppercase;letter-spacing:.04em}
.oficio .membrete span{display:block;font-size:.9em;margin-top:2px}
.oficio .right{text-align:right}
.oficio .meta p{margin:0}
.oficio .dest{margin:22px 0 14px}
.oficio .dest p{margin:0;font-weight:700}
.oficio .presente{font-weight:700}
.oficio .body p{text-align:justify;margin:0 0 12px}
.oficio .firma{text-align:center;margin-top:26px}
.oficio .firma p{margin:0}
.oficio .firma .att{font-weight:700}
.oficio .linea-firma{margin:44px auto 6px}
.oficio .ccp p{margin:0}
.oficio .pie{margin-top:28px;border-top:1px solid #999;padding-top:4px;text-align:center;font-size:.75em;color:#444}
.oficio.changed{animation:y-resalta 1.2s ease-out}
@keyframes y-resalta{from{box-shadow:0 0 0 4px var(--y-mandarina-50),var(--y-sombra-hoja)}to{box-shadow:var(--y-sombra-hoja)}}
@media (max-width:959px){
  .vista__vacia img{width:150px}
  .vista__privacidad{padding:0 var(--y-s-4) var(--y-s-4)}
  .compositor{max-height:55vh}
  .oficio .dest{margin:14px 0 10px}
  .oficio .linea-firma{margin-top:28px}
}
/* ===================== v2.3: botones que no se cortan en ningún ancho ===================== */
/* Causa: la regla heredada `.compositor .btn{height:52px;width:52px;padding:0}` era para el antiguo botón
   de solo icono; con texto («Continuar», «Enviar», «Omitir») el texto se salía y se veía cortado. */
.compositor .btn{height:auto;width:auto;min-height:52px;padding:10px 20px;max-width:100%;white-space:normal;line-height:1.2;text-align:center}
.compositor .row{flex-wrap:wrap;min-width:0}
.compositor .row > *{min-width:0}
.compositor .row--end .btn{flex:0 1 auto}
.compositor .chip,.ajustes .chip{max-width:100%;min-width:0;white-space:normal;height:auto;padding-top:8px;padding-bottom:8px;line-height:1.25}
.compositor .opciones > *{min-width:0}
.descarga .btn,.ajustes .btn{max-width:100%;min-width:0;white-space:normal;height:auto;line-height:1.2;text-align:center;padding-top:10px;padding-bottom:10px}
.descarga{flex-wrap:wrap}
.form .input,.form select,.form textarea{min-width:0;max-width:100%}
/* Zonas seguras (iPhone con barra inferior / muesca) */
.compositor{padding-bottom:max(var(--y-s-5),env(safe-area-inset-bottom))}
.descarga{padding-bottom:max(var(--y-s-4),env(safe-area-inset-bottom))}
@media (max-width:959px){
  .compositor{padding-bottom:max(var(--y-s-4),env(safe-area-inset-bottom));padding-left:max(var(--y-s-4),env(safe-area-inset-left));padding-right:max(var(--y-s-4),env(safe-area-inset-right))}
}
@media (max-width:380px){
  .compositor .row--end{justify-content:stretch}
  .compositor .row--end .btn{flex:1 1 auto}
}
/* La fila con «Continuar»/«Enviar» queda siempre a la vista aunque los campos no quepan (pantallas bajas o con teclado) */
.compositor{max-height:62vh}
.compositor .form > .row--end{position:sticky;bottom:calc(-1 * var(--y-s-5));background:#fff;padding:var(--y-s-2) 0 var(--y-s-1);margin-top:calc(-1 * var(--y-s-1));z-index:1}
@media (max-width:959px){
  .compositor{max-height:62vh}
  .compositor .form > .row--end{bottom:calc(-1 * var(--y-s-4))}
}
@media (max-height:820px){
  .compositor .form{gap:var(--y-s-2)}
  .compositor .form .campo label,.compositor .form label{margin-bottom:4px}
}
/* En pantallas bajas (320×568, o con el teclado abierto) el compositor era `flex:none` y empujaba el botón fuera de la pantalla:
   ahora cede altura y se desplaza por dentro, con la fila del botón fija abajo. */
.compositor{flex:0 1 auto;min-height:0}
@media (max-height:600px) and (max-width:959px){
  .chat__head{padding-top:var(--y-s-2);padding-bottom:var(--y-s-1)}
  .tabs{margin-top:var(--y-s-2)}
}
/* ===================== v2.3: reporte visual de QA en producción (G3, G4, M2–M5) ===================== */
/* G3: en pantallas bajas el compositor no puede comerse el chat (quedaba de 32–79 px) */
.compositor{max-height:min(62vh, calc(100% - 140px))}
@media (max-height:640px) and (max-width:959px){
  .compositor{max-height:50vh}
  .tabs{margin-top:6px}
  .tabs button{min-height:44px}
  .chat__head{padding-top:6px;padding-bottom:4px}
  .chat__head img{width:32px;height:32px}
  .chat__head small{display:none}
  .compositor .form{gap:8px}
  .compositor .campo label,.compositor .form label{font-size:.875rem;margin-bottom:2px}
  .compositor .input{min-height:44px}
  .log{padding:var(--y-s-3) var(--y-s-4)}
}
/* G4 / M2 (móvil): se desplaza toda la pestaña «Vista previa», la hoja se ve completa y «Descargar» queda fija abajo */
@media (max-width:959px){
  .vista{overflow:auto;overscroll-behavior:contain}
  .vista__papel{flex:none;overflow:visible;min-height:auto}
  .descarga{position:sticky;bottom:0;z-index:2;box-shadow:0 -6px 16px rgba(20,30,60,.08)}
  .ajustes{flex:none}
}
/* M2 (escritorio 1280–1366): los 4 ajustes ya no se van a 2 líneas y dejan más hoja visible */
@media (min-width:960px) and (max-width:1439px){
  .ajustes{padding-left:var(--y-s-6);padding-right:var(--y-s-6);gap:8px}
  .ajustes .chip{padding:0 12px}
  .ajustes__txt{display:none}   /* igual que en celular: el chat ya dice cuántos ajustes quedan */
  .descarga{padding:var(--y-s-3) var(--y-s-6) var(--y-s-4)}
  .vista__head{padding:var(--y-s-3) var(--y-s-6)}
}
/* M3: «Nuevo oficio · Respuesta a oficio» no se parte en 320–360 px */
.app-top__titulo{min-width:0;white-space:nowrap}
.app-top__titulo #tipoTitulo,.app-top__titulo .muted{overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:420px){ .app-top__titulo{font-size:.875rem;gap:6px} }
/* M4: cabecera de la vista previa: «Borrador listo» / «Primera versión» sin partirse */
.vista__head{flex-wrap:wrap;row-gap:6px}
.estado,#roundText{white-space:nowrap}
@media (max-width:420px){ .vista__head h2{font-size:1rem} }
/* M5: logo del asistente con área táctil de 44×44 */
.app-top .marca{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
@media (min-width:960px) and (max-width:1439px){
  .ajustes{padding-top:var(--y-s-3);padding-bottom:var(--y-s-2);gap:6px}
  .ajustes .chip{min-height:40px;padding:0 10px;font-size:.875rem;gap:6px}
  .descarga{padding-top:var(--y-s-2);padding-bottom:var(--y-s-3);flex-wrap:nowrap}
  .descarga .btn--grande{min-height:48px;font-size:1rem}
  .vista__privacidad{padding-bottom:var(--y-s-3)}
}
@media (min-width:960px) and (max-width:1279px){
  .descarga .solo-escritorio{display:none}
  .descarga .solo-movil{display:inline}
  .descarga .btn{white-space:nowrap;flex:none}
}
/* ===================== v2.3.1 (QA de la v2.3) ===================== */
/* F4: sin «…» en el título. A ≤420 px, ya elegido el tipo, sólo se ve el tipo («Respuesta a oficio») */
.app-top__titulo #tipoTitulo,.app-top__titulo .muted{overflow:visible;text-overflow:clip}
#tipoTitulo:not(:empty)::before{content:"· "}
@media (max-width:420px){
  body.started .app-top__nuevo{display:none}
  body.started #tipoTitulo{color:var(--y-tinta);font-weight:600}
  body.started #tipoTitulo::before{content:none}
}
/* F2/F3 (y sugerencia del gerente): «Continuar» va DEBAJO del último campo, en el flujo (ya no sticky sobre los campos);
   el formulario del paso tiene su propio scroll dentro del compositor */
.compositor .form > .row--end{position:static;bottom:auto;background:none;padding:0;margin-top:0;z-index:auto}
.compositor{overscroll-behavior:contain}
/* Contador: en <960 px va en la cabecera del chat (misma frase que en Mis oficios / Mi cuenta) */
.chat__quien{min-width:0}
.uso-movil{display:none;font-weight:600;color:var(--y-cobalto-900, #1d2b6b)}
@media (max-width:959px){
  .chat__head .uso-movil{display:block}
  .chat__head .uso-movil[hidden]{display:none}
}
/* «Paso: …» fuera del encabezado en pantallas angostas (≤420 px); la barra de progreso sigue */
@media (max-width:420px){
  .chat__head #progressText{display:none}
}
/* 320–380 px: formularios compactos para que el paso quepa y la pregunta se lea completa */
@media (max-width:380px){
  .chat__head{padding-top:6px;padding-bottom:4px}
  .chat__head img{width:32px;height:32px}
  .chat__head strong{font-size:1rem}
  .log{padding:var(--y-s-2) var(--y-s-3)}
  .compositor{padding:8px 12px max(8px,env(safe-area-inset-bottom))}
  .compositor .form{gap:6px}
  .compositor .campo label,.compositor .form label{font-size:.8125rem;margin-bottom:1px}
  .compositor .input{min-height:44px;padding-top:6px;padding-bottom:6px}
  .compositor .btn{min-height:46px}
}
/* Menor: chips de ajuste de 44 px también entre 960 y 1439 */
@media (min-width:960px) and (max-width:1439px){
  .ajustes .chip{min-height:44px}
}
/* Móvil: tras un ajuste los chips quedaban a medias bajo la barra «Descargar» (sticky abajo). Ahora la barra va ANTES
   de los ajustes en el flujo: mientras la hoja se desplaza, «Descargar» sigue fija abajo; cuando los ajustes aparecen,
   la barra ya está en su lugar, encima de ellos, y nunca los tapa. */
@media (max-width:959px){
  .vista .vista__head{order:0}
  .vista .vista__vacia,.vista .vista__papel{order:1}
  .vista .descarga{order:2}
  .vista .ajustes{order:3}
  .vista .vista__privacidad{order:4}
}
/* 320–380 px: «Reiniciar» sólo icono (el texto queda para lectores de pantalla) y el contador en una línea */
.chat__head .uso-movil{white-space:nowrap}
@media (max-width:380px){
  .chat__head .btn{width:44px;min-width:44px;padding:0;justify-content:center}
  .chat__head .restart-txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .chat__head .chat__dictar{width:auto;min-width:0;padding:0 12px}
}
/* v2.5.1 final (QA R-06): «Prefiero dictarlo» no aplasta «Tu asistente»; en móvil baja a su propia línea */
.chat__quien{flex:1 1 auto;min-width:0}
.chat__head .chat__dictar{margin-left:auto}
.chat__head .chat__dictar + .btn{margin-left:0}
@media (max-width:480px){
  .chat__head{flex-wrap:wrap;row-gap:4px}
  .chat__head .chat__dictar{order:3;flex:1 0 100%;margin-left:0;min-height:40px;justify-content:center}
}
/* v2.5.1 final (QA N-01): «No guardado: descárgalo» no va en verde de éxito */
.estado.estado--aviso{background:#FFF4E0;color:#8A5A00}
/* iPhone SE (320x568) y similares: el formulario del paso cabe completo con «Continuar» debajo del último campo */
@media (max-width:380px) and (max-height:700px){
  .app-top{height:50px}
  .tabs{margin:4px 12px 0;padding:3px}
  .compositor{max-height:calc(100% - 96px)}
  .compositor .form{gap:4px}
  .compositor .form .row--end{margin-top:4px}
}
/* 960–1099 px (columna de vista previa de ~440 px): se veía sólo el membrete. Ajustes en UNA fila (sin iconos),
   la nota «Tamaño carta…» fuera de la barra y la nota de privacidad compacta: queda visible el cuerpo del oficio */
@media (min-width:960px) and (max-width:1099px){
  .vista__head{padding-top:var(--y-s-3);padding-bottom:var(--y-s-2)}
  .ajustes{flex-wrap:nowrap;gap:6px;padding-top:var(--y-s-2);padding-bottom:var(--y-s-2)}
  .ajustes .chip{flex:1 1 auto;padding:0 8px;font-size:.8125rem;white-space:nowrap;justify-content:center}
  .ajustes .chip svg{display:none}
  .descarga{padding-top:var(--y-s-2);padding-bottom:var(--y-s-2)}
  .descarga .small{display:none}
  .descarga .btn{flex:1 1 auto}
  .vista__privacidad{margin-top:0;margin-bottom:var(--y-s-2);font-size:.75rem;line-height:1.35}
}
/* ===================== v2.3.2 (QA de la v2.3.1) ===================== */
/* F3: ejemplo largo como ayuda debajo del campo */
.campo__ayuda{display:block;margin-top:3px;font-size:.8125rem;line-height:1.3;color:var(--y-tinta-2)}
.form--texto .campo__ayuda{margin-top:-2px}
.form--texto textarea.input{overflow-y:auto}
/* F2: sombra cuando el formulario tiene más contenido con scroll (arriba / abajo) */
.compositor.hay-abajo::after{content:"";position:sticky;bottom:calc(-1 * var(--y-s-4));display:block;flex:none;height:18px;margin-top:-18px;pointer-events:none;
  background:linear-gradient(rgba(20,30,60,0),rgba(20,30,60,.16))}
.compositor.hay-arriba{box-shadow:inset 0 10px 10px -10px rgba(20,30,60,.25)}
/* F2: la pregunta repetida arriba del formulario: sólo en modo compacto (pantalla baja / teclado abierto) */
.form__pregunta{display:none}
@media (max-width:959px){
  body.compacto .app-top{height:48px}
  body.compacto.con-pregunta .chat__head{display:none}
  body.compacto.con-campo .tabs{display:none}
  body.compacto .tabs{margin-top:4px}
  /* el chat queda accesible (aria-live) pero sin ocupar alto: la pregunta se lee completa en el encabezado del formulario */
  body.compacto.con-pregunta .log{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);flex:none}
  body.compacto.con-pregunta .compositor{flex:1 1 auto;max-height:none;padding-top:0;scroll-padding-top:calc(var(--alto-pregunta, 64px) + 26px);scroll-padding-bottom:12px}
  body.compacto .form__pregunta{display:block;position:sticky;top:0;z-index:3;flex:none;background:#fff;margin:0 0 6px;padding:8px 0 6px;border-bottom:1px solid var(--y-linea)}
  body.compacto .form__pregunta-txt{margin:0;font-size:.9375rem;line-height:1.35;font-weight:600;color:var(--y-tinta);white-space:pre-line}
  body.compacto .form__pregunta-pista{display:block;margin-top:2px;font-size:.8125rem;line-height:1.3;color:var(--y-tinta-2)}
  body.compacto .form__pregunta-uso{display:block;margin-bottom:2px;font-size:.75rem;font-weight:600;color:var(--y-cobalto-900, #1d2b6b)}
  body.compacto .form__pregunta-uso[hidden]{display:none}
  /* si de plano no cabe: «Continuar» fijo abajo (con teclado abierto, pegado al teclado) y el campo enfocado se acomoda arriba de él */
  /* v2.3.14 (M-2): sólo si el campo enfocado ni solo cabe entre la barra de la pregunta y «Continuar» (pregunta larga + textarea, ~250 px visibles) */
  body.compacto .compositor.pregunta-suelta > .form__pregunta{position:relative}
  body.compacto .compositor.no-cabe{scroll-padding-bottom:var(--alto-continuar, 72px)}   /* v2.3.14 (M-2): alto real de «Continuar» (app.js altosFijos) */
  body.compacto .compositor.no-cabe::after{display:none}
  body.compacto .compositor.no-cabe .form > .row--end{position:sticky;bottom:calc(-1 * var(--y-s-2));z-index:3;background:#fff;margin-top:4px;padding:6px 0 8px;box-shadow:0 -8px 10px -8px rgba(20,30,60,.25)}
}
/* v2.5.1 final (QA R-06 M-2): en compacto (320×568) queda visible sólo la línea de «Prefiero dictarlo» si la voz está activa;
   no en preguntas con campo (teclado abierto), para no quitar alto al formulario (v2.3.14 M-2) */
@media (max-width:959px){
  body.compacto.con-pregunta:not(.con-campo) .chat__head:has(#dictarLink:not([hidden])){display:flex;padding:2px 12px}
  body.compacto.con-pregunta .chat__head > :not(.chat__dictar){display:none}
}
/* v2.3.3 (QA menor): a 320–365 px «Descargar documento .docx» se partía en 2 líneas → texto corto + nowrap hasta 380 px */
.descarga .btn{white-space:nowrap}
.dl-corto{display:none}
@media (max-width:380px){
  .descarga .solo-movil .dl-largo{display:none}
  .descarga .solo-movil .dl-corto{display:inline}
  .descarga .btn{font-size:1rem;padding-left:14px;padding-right:14px}
}
@media (max-width:959px){
  body.compacto .compositor .form{gap:4px}
  body.compacto .compositor .campo label,body.compacto .compositor .form label{margin-bottom:1px;font-size:.8125rem;line-height:1.25}
  body.compacto .campo__ayuda{margin-top:1px;font-size:.75rem}
  body.compacto .compositor .form > .row--end{margin-top:4px}
}
@media (max-width:380px){ .campo__ayuda{font-size:.75rem} }
@media (max-width:959px){
  body.compacto .compositor .input{min-height:44px;height:44px;padding-top:6px;padding-bottom:6px}
  body.compacto .compositor textarea.input{height:auto}
  body.compacto .compositor .btn{min-height:46px}
  body.compacto.con-pregunta .compositor{padding-bottom:max(6px,env(safe-area-inset-bottom))}
  body.compacto .form__pregunta-uso{float:right;margin:2px 0 0 10px}
  body.compacto .form__pregunta{padding-top:6px}
}
/* 320×568 (iPhone SE sin teclado): la ayuda debajo de «Cargo» no le quita alto al chat */
@media (max-width:380px) and (max-height:700px){
  .app-top{height:46px}
  .chat__head{padding-top:3px;padding-bottom:1px}
  .compositor{padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
  .compositor .form{gap:4px}
  .compositor .btn{min-height:44px}
}
@media (max-width:959px){
  body.compacto .app-top{height:46px}
  body.compacto.con-campo .progreso{display:none}
  body.compacto .form__pregunta{margin-bottom:4px}
}
@media (max-width:380px) and (max-height:700px){
  .tabs{margin-top:2px}
  .chat__head{padding-top:2px;padding-bottom:0}
  .campo__ayuda{line-height:1.2}
  .compositor .campo label,.compositor .form label{line-height:1.2}
}
/* 320×400 (teclado alto en iPhone SE): chips del tipo en 2 columnas, más compactos, con scroll del compositor */
@media (max-width:959px) and (max-height:420px){
  body.compacto .compositor .choices{gap:6px}
  body.compacto .compositor .chip{padding:6px 10px;font-size:.875rem}
  body.compacto .compositor .chip small{display:none}
  body.compacto .vista__head{padding-top:4px;padding-bottom:4px}
  body.compacto .vista__head h2{font-size:.9375rem}
  body.compacto .descarga .small{display:none}
  body.compacto .ajustes .chip{padding:0 8px;font-size:.8125rem}
}
/* v2.3.4 (Sr_Yalemo): pantalla «Ya usaste tu oficio gratis»: sin barra de progreso y sin «Reiniciar» */
body.sin-cupo .progreso,body.sin-cupo #restartBtn{display:none!important}
/* v2.3.4 (QA menor): a 320 px el chip «Agregar algo» se partía en 2 renglones */
.ajustes .chip{white-space:nowrap}
@media (max-width:360px){ .ajustes .chip{padding-left:10px;padding-right:10px;gap:6px;font-size:.875rem} .ajustes .chip svg{width:16px;height:16px} }
/* v2.3.5 (CSP): antes style="width:0" en el HTML y style="margin-top:8px" en el HTML generado de la vista previa */
#progressBar{width:0}
.oficio p.lugar-fecha{margin-top:8px!important}
/* v2.3.12 (legal, aviso v3.2): aviso breve de datos sensibles. Es el primer renglón del chat (#chatLog), así que no ocupa alto fijo y no aplasta el chat ni el teclado en celular. Se envuelve a 2 renglones en 300–390 px. */
.aviso-sensibles{flex:none;margin:0;padding:6px 12px;border-left:4px solid var(--y-aviso);border-radius:var(--y-r-sm,6px);
  background:var(--y-aviso-50);color:var(--y-tinta);font-size:var(--y-t-small);line-height:1.35;overflow-wrap:anywhere}
@media (max-width:959px){ .aviso-sensibles{padding:5px 10px} }

/* v2.3.13 (QA v2.3.12 G-1): aviso de datos sensibles en la barra de la pregunta, sólo en modo compacto (ahí #chatLog está oculto) */
.form__pregunta-aviso{display:none}
body.compacto .form__pregunta-aviso{display:block;margin-top:4px;padding:2px 8px;border-left:3px solid var(--y-aviso);background:var(--y-aviso-50);color:var(--y-tinta);font-size:.75rem;line-height:1.3;font-weight:400}

/* v2.3.13 (Web, detector con teclado de 400 px): con el aviso en la barra de la pregunta, el paso de 3 campos ya no cabía y «Continuar» fijo
   quedaba encima del último campo. Con alto visible ≤ 440 (teclado abierto) se compacta la barra; el aviso sigue a 12 px, completo y a la vista. */
@media (max-width:959px) and (max-height:440px){
 body.compacto .form__pregunta{padding-top:3px;padding-bottom:3px;margin-bottom:2px}
 body.compacto .form__pregunta-txt{font-size:.875rem;line-height:1.3}
 body.compacto .form__pregunta-aviso{margin-top:2px;padding:1px 6px;line-height:1.25}
 body.compacto .compositor .form{gap:3px}
 body.compacto .compositor.no-cabe .form > .row--end{padding:4px 0 6px;margin-top:2px}
}
@media (max-width:340px) and (max-height:440px){
 body.compacto .form__pregunta-aviso{padding:1px 4px;border-left-width:2px;letter-spacing:-.01em;font-size:.6875rem}   /* QA v2.3.15: 1 renglón (WebKit 320 lo partía en 2 → etiqueta + campo ya no cabían con 250 px) */
 body.compacto .form__pregunta-txt{font-size:.8125rem}
 body.compacto .form__pregunta-uso{font-size:.6875rem;margin-left:6px}
 body.compacto .form__pregunta{padding-top:2px;padding-bottom:2px}
 body.compacto .compositor .form{gap:2px}
 body.compacto .compositor .campo label,body.compacto .compositor .form label{font-size:.75rem;line-height:1.2;margin-bottom:1px}
 body.compacto .compositor.no-cabe .form > .row--end{padding:3px 0 4px}
}

/* v2.5 — editor manual del oficio (antes de descargar). Mismo panel de la vista previa; una columna; sirve desde 320 px. */
.editor{flex:1 1 auto;overflow:auto;padding:var(--y-s-6) var(--y-s-8);background:#fff;display:flex;flex-direction:column;gap:0}
.editor__titulo{margin:0 0 var(--y-s-2);font:700 1.25rem/1.25 var(--y-font-titulos);color:var(--y-tinta)}
.editor__ayuda{margin:0 0 var(--y-s-5)}
.editor__error{margin:0 0 var(--y-s-4);padding:10px 14px;border-radius:var(--y-r-md);background:#FEF3F2;color:#B42318;font-weight:600}
.editor__grupo{margin:0 0 var(--y-s-5);padding:var(--y-s-4) var(--y-s-4) 0;border:1px solid var(--y-linea);border-radius:var(--y-r-md);min-width:0}
.editor__grupo legend{padding:0 6px;font-weight:600}
.editor .input{min-width:0;max-width:100%}
.editor textarea.input{resize:vertical;min-height:64px}
.editor__cuerpo{min-height:260px;line-height:1.55}
.editor__acc{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:var(--y-s-3);padding:var(--y-s-3) 0 var(--y-s-2);background:#fff}
.editor__acc .btn{flex:1 1 180px;min-width:0}
@media (max-width:959px){
  .editor{padding:var(--y-s-4)}
  .editor__cuerpo{min-height:200px}
}
@media (max-width:359px){
  .editor{padding:var(--y-s-3)}
  .editor__grupo{padding:var(--y-s-3) var(--y-s-3) 0}
}
.descarga #editarBtn svg{width:20px;height:20px}
.editor[hidden],.yl-trampa[hidden]{display:none}

/* v2.5.1 (QA R-03): el asistente queda oculto hasta que app.js confirma la sesión; mientras, «Revisando tu cuenta…» o «Reintentar». */
.verificando { display: none; }
body.yl-verificando .verificando { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem 1.25rem; text-align: center; }
body.yl-verificando .tabs, body.yl-verificando #layout, body.yl-verificando .saltar { display: none !important; }
.chat__dictar { white-space: nowrap; }
/* v2.5.1 (QA N-01): aviso junto al botón de Word cuando el oficio no se pudo guardar */
.descarga__aviso{flex:none;width:100%;box-sizing:border-box;margin:0;padding:10px 12px;border-radius:10px;background:#fff4e0;border:1px solid #f0c27a;color:#6b4300;font-weight:600;font-size:.95rem;line-height:1.35}
.descarga__aviso[hidden]{display:none}

/* v2.5.1 delta3 (gerente): «Prefiero dictarlo» es un BOTÓN sólido con el color fuerte del de dictar de empezar.php (.v5-dictar) y su micrófono */
.chat__head .chat__dictar{background:var(--y-tinta);color:#FFFFFF;border-color:var(--y-tinta);min-height:44px;gap:8px;font-weight:700}
.chat__head .chat__dictar:hover{background:var(--y-tinta-2);border-color:var(--y-tinta-2);color:#FFFFFF}
.chat__head .chat__dictar:focus-visible{outline:3px solid var(--y-foco);outline-offset:2px}
.chat__head .chat__dictar svg{flex:none;width:20px;height:20px}
@media (max-width:480px){
  .chat__head .chat__dictar{min-height:44px}
}
@media (max-width:959px){
  body.compacto.con-pregunta .chat__head .chat__dictar{flex:1 0 100%;margin-left:0;min-height:44px;justify-content:center}
}
/* v2.5.1 delta3 (gerente): en compacto la pregunta se ve IGUAL que en el chat (burbuja con avatar) y el contador va en su propia línea,
   arriba y fuera de la burbuja (antes, desde v2.3.13, era texto en negritas con el contador flotando al lado) */
.form__pregunta-msg{display:flex;gap:8px;align-items:flex-start}
.form__pregunta-burbuja{flex:1 1 auto;min-width:0}
@media (max-width:959px){
  body.compacto .form__pregunta-uso{float:none;display:block;margin:0 0 4px;text-align:right;line-height:1.2}
  body.compacto .form__pregunta-uso[hidden]{display:none}
  body.compacto .form__pregunta-av{width:28px;height:28px;margin-top:0}
  body.compacto .form__pregunta-burbuja{padding:8px 12px;background:var(--y-papel);border:1px solid var(--y-linea);border-radius:16px;border-top-left-radius:6px}
  body.compacto .form__pregunta-txt{font-weight:400}
}
@media (max-width:959px) and (max-height:440px){
  body.compacto .form__pregunta-uso{margin:0 0 2px}
  body.compacto .form__pregunta-av{width:22px;height:22px}
  body.compacto .form__pregunta-burbuja{padding:4px 10px;border-radius:12px;border-top-left-radius:4px}
}
@media (max-width:340px) and (max-height:440px){
  body.compacto .form__pregunta-uso{margin:0 0 1px}
  body.compacto .form__pregunta-burbuja{padding:3px 8px}
}
/* v2.5.1 delta3: 1.ª pregunta en pantalla baja vertical (320×568) SIN modo compacto: el chat toma el alto de su contenido (aviso + saludo en burbuja)
   y el compositor el que sobra, con scroll (mínimo una fila de opciones a la vista) */
@media (max-width:959px){
  body.inicio-corto .log{flex:0 1 auto}
  body.inicio-corto .compositor{flex:1 1 64px;min-height:64px;max-height:none}
}
/* v2.5.1 delta3: con teclado en horizontal quedan ≤280 px visibles (app.js .muy-bajo): la burbuja va a todo lo ancho en una línea y el contador
   pasa a la línea del aviso (fuera de la burbuja), para que la barra no crezca y el campo y «Continuar» quepan entre las dos barras (M-2 de v2.3.14) */
@media (max-width:959px){
  body.compacto.muy-bajo .form__pregunta{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:1px}
  body.compacto.muy-bajo .form__pregunta-msg{order:1;flex:1 0 100%;min-width:0;gap:6px;align-items:center}
  body.compacto.muy-bajo .form__pregunta-aviso{order:2;flex:1 1 0;min-width:0;margin-top:0}
  body.compacto.muy-bajo .form__pregunta-uso{order:3;flex:none;margin:0}
  body.compacto.muy-bajo .form__pregunta-av{width:18px;height:18px}
  body.compacto.muy-bajo .form__pregunta-burbuja{padding:1px 8px;border-radius:10px;border-top-left-radius:4px}
  body.compacto.muy-bajo .form__pregunta-txt{font-size:.8125rem;line-height:1.2}
}
/* v2.5.1 delta4 (QA D3-01): HORIZONTAL baja (568×320 … 932×430). Sólo aquí (en vertical, aun con teclado, el ancho es <480 y no aplica):
   · «Prefiero dictarlo» pasa a botón de sólo ícono 44×44 en el encabezado (mismo color tinta, aria-label) y la franja de 44 px desaparece;
     las pestañas Conversación / Vista previa se quedan (son la única forma de ver el oficio en celular).
   · la barra de la pregunta (saludo + aviso) deja de ir fija en las preguntas de opciones: las opciones ya no pasan por debajo;
   · las opciones van en UNA fila con scroll horizontal;
   · con teclado, el campo guarda distancia del encabezado (scroll-padding-top de la página = alto del encabezado; app.js asegurarVisibleCompacto también lo cuenta). */
.app-top__dictar{display:none}
@media (min-width:480px) and (max-width:959px) and (max-height:440px){
  .app-top__dictar:not([hidden]){display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:var(--y-r-pill, 999px);background:var(--y-tinta);color:#FFFFFF;border:1px solid var(--y-tinta)}
  .app-top__dictar:hover{background:var(--y-tinta-2);border-color:var(--y-tinta-2);color:#FFFFFF}
  .app-top__dictar:focus-visible{outline:3px solid var(--y-foco);outline-offset:2px}
  .app-top__dictar svg{width:22px;height:22px}
  body.compacto.con-pregunta:not(.con-campo) .chat__head:has(#dictarLink:not([hidden])){display:none}
  .chat__head .chat__dictar{display:none}
  body.compacto.con-pregunta:not(.con-campo) .compositor > .form__pregunta{position:static}
  body.compacto .compositor .opciones{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:4px}
  body.compacto .compositor .opciones > *{flex:none}
  html:has(body.compacto){scroll-padding-top:52px}
  body.compacto.con-pregunta .compositor.pregunta-suelta{scroll-padding-top:4px}   /* barra suelta (160 px visibles): al escribir, el navegador no baja el campo bajo «Continuar» para dejar el alto de una barra que ya no va fija */   /* si el navegador desplaza la PÁGINA al enfocar (iOS con teclado), deja libre el alto del encabezado */
  body.compacto.sin-cabecera .app-top{display:none}   /* v2.5.2 (QA D4-K) */
  body.compacto.sin-cabecera .compositor > .form__pregunta{position:static}   /* v2.5.2c (QA D4-K): sin encabezado (≤170 px visibles con teclado), la barra de la pregunta deja de ir fija y se desplaza con el contenido; se alcanza deslizando hacia arriba */
  body.compacto.sin-cabecera .compositor{scroll-padding-top:4px}   /* v2.5.2c: sin barra fija arriba, el desplazamiento nativo al escribir ya no reserva su alto (como .pregunta-suelta) */
  body.compacto.sin-cabecera .compositor .campo{row-gap:2px}   /* v2.5.2c: hueco etiqueta→campo 7→3 px para que a 120 px quepan etiqueta + campo + «Continuar» (la pila medía 121 px) */
  body.compacto.sin-cabecera .compositor.no-cabe .form > .row--end{padding:2px 0}   /* v2.5.2c: «Continuar» fijo 4px 0 6px → 2px 0 (de esos 6 px de abajo sólo se veían 4; el botón llega al borde del teclado): a 120 px el campo queda 4 px arriba de «Continuar» sin que la franja blanca lo tape */
}

/* v2.5.4 (QA C-6/C-7): «Redactar con lo que ya te di» va en la MISMA franja que «Enviar respuestas» también en vertical (app.js pedirInfo).
   <960 px: una sola fila (cada botón parte su texto en 2 renglones) para que la franja, fija abajo en compacto, no crezca a dos filas. */
@media (max-width:959px){
  .compositor .row--forzar{flex-wrap:nowrap}
  .compositor .row--forzar .btn{flex:1 1 0;padding-left:10px;padding-right:10px}
}
@media (max-width:380px){
  .compositor .row--forzar .btn{font-size:.9375rem;padding:6px 8px}
}
/* …y si la barra de la pregunta (larga) fija arriba no deja ver el formulario con esa franja (app.js verFila → .pregunta-larga), sube con él */
@media (max-width:959px){
  body.compacto .compositor.pregunta-larga > .form__pregunta{position:relative}
}
/* v2.5.4 (QA C-9): en HORIZONTAL (568×320, 667×375), sin foco en el formulario (teclado cerrado), con las preguntas de la IA la barra de
   la pregunta (texto largo + pista + aviso) es más alta que el formulario y, fija arriba, tapaba el campo aun deslizando → ahí sube con el
   formulario (como .pregunta-suelta). Sólo en este @media y sólo con el formulario de preguntas (.con-info, app.js pedirInfo). */
@media (max-width:959px) and (orientation:landscape){
  body.compacto .compositor.con-info:not(:focus-within) > .form__pregunta{position:relative}
}
/* v2.5.4b (iPhone de Gabriel, 2.ª ronda escrita con el teclado abierto): en compacto el textarea de la conversación (need_info) iba con
   flex:1 1 0% dentro del formulario en columna, así que ignoraba el alto que le pone autoCrecer y se quedaba en ~59 px (renglón y medio),
   con la franja blanca de «Enviar» encima de su parte de abajo. Con el teclado abierto (.campo-teclado, la pone app.js) toma su alto natural (crece con lo escrito),
   mínimo 3 renglones (lo mide y fija app.js: topeCampo; aquí 2 de respaldo) y el tope según el alto visible; de ahí hace scroll interno.
   Con el teclado cerrado se queda como en v2.5.4. */
body.compacto .compositor.con-info.campo-teclado .form--texto textarea.input{flex:0 0 auto;min-height:calc(2.8em + 14px)}
/* v2.5.4b: con la barra de la pregunta suelta (sube con el formulario) el desplazamiento nativo al escribir ya no reserva su alto. La regla
   equivalente de v2.3.14 sólo aplicaba en horizontal; en vertical el navegador reservaba el alto de la barra entera (--alto-pregunta + 26 px,
   más que lo visible con el teclado) y a cada tecla subía el formulario, metiendo el campo bajo la franja de «Enviar» hasta el siguiente acomodo. */
body.compacto .compositor.con-info.campo-teclado.pregunta-suelta,body.compacto .compositor.con-info.campo-teclado.pregunta-larga{scroll-padding-top:4px}
/* v2.5.4c (QA MEDIA, 320×568): al CERRAR el teclado (app.js topeCampo → .campo-cerrado, sin .campo-teclado ni límites en línea) el campo
   conserva su alto natural (autoCrecer), mínimo 3 renglones, en vez de los ~59 px de flex:1; app.js recolocarCerrado lo deja completo a la vista. */
body.compacto .compositor.con-info.campo-cerrado .form--texto textarea.input{flex:0 0 auto;min-height:calc(4.2em + 16px)}
/* v2.5.4c (revisión escritorio 1440×900): como en v2.5.3, si «Redactar con lo que ya te di» y «Enviar respuestas» no caben en un renglón,
   «Enviar respuestas» (primario) queda arriba, a la derecha, y «Redactar…» en el renglón de abajo (v2.5.4/b los partía al revés). */
@media (min-width:960px){
  .compositor .row--forzar{flex-wrap:wrap-reverse;row-gap:10px} /* 10 px entre renglones, igual que la separación de v2.5.3 */
}
/* ===================== v2.5.7: «+ Hacer nuevo oficio» (diseno/nuevo-oficio) ===================== */
/* Título de la pantalla terminada: sólo el tipo («Comisión»), texto plano, sin «Nuevo oficio ·» */
body.oficio-listo .app-top__titulo{border:0;padding:0;margin:0}
body.oficio-listo .app-top__nuevo{display:none}
body.oficio-listo #tipoTitulo.app-top__oficio{font:700 1.125rem/1.2 var(--y-font-titulos);letter-spacing:-.01em;color:var(--y-tinta)}
#tipoTitulo.app-top__oficio::before{content:none}
/* Botón secundario debajo de «Descargar» (Descargar sigue siendo el único sólido) */
.nuevo{flex:none;position:relative;padding:0 var(--y-s-8) var(--y-s-5);background:#fff}
.nuevo__ancla{position:relative}
.nuevo .btn{width:100%}
.nuevo .btn svg{width:20px;height:20px}
.nuevo .btn[aria-expanded="true"]{background:var(--y-cobalto-50)}
@media (min-width:960px) and (max-width:1439px){
  .nuevo{padding:0 var(--y-s-6) var(--y-s-3)}
  .nuevo .btn--grande{min-height:48px;font-size:1rem}
}
@media (max-width:959px){
  .vista .nuevo{order:2}
  .nuevo{padding:var(--y-s-1) var(--y-s-4) var(--y-s-4)}
}
/* Panel anclado al botón (compu). --sel-dx lo recorre si se saldría de la pantalla; la flecha sigue apuntando al botón. */
.selector{position:absolute;left:50%;bottom:calc(100% - 8px);transform:translateX(calc(-50% + var(--sel-dx, 0px)));width:min(440px,calc(100vw - 32px));box-sizing:border-box;padding:var(--y-s-5);background:#fff;border:1px solid var(--y-linea);border-radius:var(--y-r-lg);box-shadow:var(--y-sombra-2);z-index:5;text-align:left;outline:0}
.selector::after{content:"";position:absolute;left:calc(50% - var(--sel-dx, 0px));bottom:-7px;width:12px;height:12px;background:#fff;border-right:1px solid var(--y-linea);border-bottom:1px solid var(--y-linea);transform:translateX(-50%) rotate(45deg)}
.selector:focus-visible{box-shadow:var(--y-sombra-2),0 0 0 3px var(--y-cobalto-50)}
.selector__titulo{margin:0 0 4px;text-wrap:balance;font:700 1.25rem/1.25 var(--y-font-titulos);color:var(--y-tinta)}
.selector__ayuda{margin:0 0 var(--y-s-4);color:var(--y-tinta-2);font:400 .9375rem/1.45 var(--y-font-texto)}
.selector__op{display:flex;flex-direction:column}
.selector__op + .selector__op{margin-top:var(--y-s-3)}
.selector__op .v5__nota{margin:6px 0 0;text-align:center;color:var(--y-tinta-2);font:500 .875rem/1.4 var(--y-font-texto)}
.selector .hoja-inf__asa,.selector .hoja-inf__cerrar{display:none}
.hoja-inf__cab{display:flex;align-items:flex-start;gap:var(--y-s-3)}
.hoja-inf__cab > div{flex:1;min-width:0}
/* Botones de las dos opciones: los mismos de empezar.php (dictado.css · v5) */
.selector .v5-btn{width:100%;box-shadow:none}
.selector .v5-btn svg{width:20px;height:20px}
.selector .v5-escribir{background:var(--y-cobalto);color:#FFFFFF}
.selector .v5-escribir:hover{background:var(--y-cobalto-hover)}
.selector .v5-dictar{background:var(--y-tinta);color:#FFFFFF}
.selector .v5-dictar:hover{background:var(--y-tinta-2);color:#FFFFFF}
.selector .v5-nuevo{display:inline-flex;align-items:center;margin-left:2px;padding:4px 8px;border-radius:var(--y-r-pill);background:var(--y-cobalto-50);color:var(--y-cobalto-900);font:700 .6875rem/1 var(--y-font-texto);letter-spacing:.08em;text-transform:uppercase}
/* Hoja inferior (celular, o si el panel no cabe arriba del botón) */
.velo{position:fixed;inset:0;background:rgba(22,27,51,.45);z-index:20}
.selector.hoja-inf{position:fixed;left:0;right:0;bottom:0;top:auto;transform:none;width:auto;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;z-index:21;padding:var(--y-s-2) var(--y-s-5) max(var(--y-s-6),env(safe-area-inset-bottom));border:0;border-radius:var(--y-r-xl) var(--y-r-xl) 0 0;box-shadow:0 -12px 40px rgba(22,27,51,.18)}
.selector.hoja-inf::after{content:none}
.selector.hoja-inf .hoja-inf__asa{display:block;width:40px;height:4px;margin:0 auto var(--y-s-3);border-radius:4px;background:#D5D9E5}
.selector.hoja-inf .hoja-inf__cerrar{flex:none;width:44px;height:44px;margin:-6px -8px 0 0;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--y-tinta-2);cursor:pointer}
.selector.hoja-inf .hoja-inf__cerrar svg{width:22px;height:22px}
.selector.hoja-inf .selector__titulo{font-size:1.375rem;margin-top:4px}
.selector.hoja-inf .selector__op + .selector__op{margin-top:var(--y-s-4)}
/* Hoja en ventanas muy bajitas (horizontal en celular): más compacta para que las dos opciones quepan */
@media (max-height:420px){
  .selector.hoja-inf{padding-top:var(--y-s-1);padding-bottom:max(var(--y-s-3),env(safe-area-inset-bottom))}
  .selector.hoja-inf .hoja-inf__asa{margin-bottom:var(--y-s-1)}
  .selector.hoja-inf .selector__titulo{font-size:1.125rem}
  .selector.hoja-inf .selector__ayuda{margin-bottom:var(--y-s-2)}
  .selector.hoja-inf .v5-btn{min-height:48px}
  .selector.hoja-inf .selector__op + .selector__op{margin-top:var(--y-s-2)}
  .selector.hoja-inf .v5__nota{margin-top:2px}
}
/* v2.5.7 (QA): el título largo de la pantalla terminada se corta con «…» (no seco); sólo en body.oficio-listo */
body.oficio-listo .app-top__titulo{min-width:0;overflow:hidden}
body.oficio-listo .app-top__titulo #tipoTitulo.app-top__oficio{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}
/* v2.6: prueba gratis sin cuenta: llamado a crear la cuenta junto a la vista previa (en lugar de «Descargar») */
.prueba-bar{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px var(--y-s-4);padding:var(--y-s-4) var(--y-s-8) var(--y-s-5);background:#fff;border-top:1px solid rgba(20,30,60,.08)}
.prueba-bar[hidden]{display:none}
.prueba-bar__txt{margin:0;flex:1 1 280px;min-width:0;color:var(--y-tinta-2);font-size:.95rem;line-height:1.4}
.prueba-bar .btn{flex:none;width:auto;max-width:100%;white-space:normal;height:auto;line-height:1.2;padding-top:10px;padding-bottom:10px}
@media (max-width:959px){.prueba-bar{flex-direction:column;align-items:stretch;position:sticky;bottom:0;z-index:2;padding:var(--y-s-3) var(--y-s-4) max(var(--y-s-4),env(safe-area-inset-bottom));box-shadow:0 -6px 16px rgba(20,30,60,.08)}.prueba-bar__txt{flex:none}.prueba-bar .btn{width:100%}}

/* v2.6e — asistente.html como landing de anuncios (sólo invitado con su prueba gratis; app.js avisoGratis) */
.bienvenida{flex:none;padding:10px var(--y-s-6);background:var(--y-cobalto-50);border-bottom:1px solid var(--y-linea);color:var(--y-cobalto-900)}
.bienvenida[hidden]{display:none}
.bienvenida__txt{margin:0;font-size:.9375rem;line-height:1.4;font-weight:500}
.bienvenida__txt strong{font-weight:700;color:var(--y-tinta)}
.bienvenida__acc{display:inline;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--y-cobalto);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bienvenida__acc:hover{color:var(--y-cobalto-hover)}
.bienvenida__acc:focus-visible{outline:2px solid var(--y-foco);outline-offset:2px;border-radius:4px}
#avisoDictarO[hidden]{display:none}
body.yl-verificando .bienvenida{display:none}
body.invitado .app-top__nuevo{display:none}
body.invitado #tipoTitulo::before{content:none}
body.invitado #tipoTitulo{color:var(--y-tinta);font-weight:600}
.app-top__nav .app-top__ligero{font-weight:500;color:var(--y-tinta-2)}
.app-top__nav .app-top__ligero:hover{color:var(--y-tinta)}
@media (max-width:959px){
  .bienvenida{padding:8px var(--y-s-4)}
  .bienvenida__txt{font-size:.875rem;line-height:1.35}
  body.started .bienvenida{display:none}   /* en celular, al elegir el tipo de oficio el espacio vuelve a ser del asistente */
}

/* v2.6e2/e3/e4 — sello (v2.6e4: ROJO, como v2.6e2) «PRIMER OFICIO GRATIS» en el aviso del invitado (blanco sobre #C8102E = 5.88:1) y GRATIS en rojo
   y negritas dentro del texto (#B3001B sobre cobalto-50 #E9EDFF = 6.15:1). Sin íconos de alerta. */
.bienvenida:not([hidden]){display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap}
.sello-gratis{display:inline-block;flex:none;margin:2px 0;padding:7px 16px 6px;background:#C8102E;color:#fff;border-radius:12px;box-shadow:0 5px 14px rgba(200,16,46,.28),0 1px 3px rgba(22,27,51,.18),inset 0 0 0 2px #C8102E,inset 0 0 0 4px rgba(255,255,255,.55);transform:rotate(-2deg);font:800 1.375rem/1.1 var(--y-font-titulos);letter-spacing:.03em;text-transform:uppercase}
.bienvenida__txt .gratis{color:#B3001B;font-weight:800}
@media (max-width:959px){ .sello-gratis{font-size:1.25rem;padding:6px 14px 5px} }
/* v2.7a: vista previa de otros tipos de documento (renglones de docx-builder.js → vista; sólo clases, sin estilos en línea) */
#paper .doc-r{margin:0 0 .6em}
#paper .doc-r--izq{text-align:left}#paper .doc-r--der{text-align:right}
#paper .doc-r--centro{text-align:center}#paper .doc-r--just{text-align:justify}
#paper .doc-r--neg{font-weight:700}
#paper .doc-r--titulo{font-size:1.1em;letter-spacing:.02em;margin-bottom:1em}
#paper .doc-r--linea{margin:0;overflow:hidden;white-space:nowrap}
#paper .doc-r--vacio{margin:0;line-height:1.2}
/* v2.7a: avisos del formato en la vista previa (contraste AA: #3b2a00 sobre #fff7e0 ≈ 13:1) */
#paper .doc-avisos{margin:1.6em 0 0;padding:.8em 1em;border:1px solid #9a6200;border-left-width:4px;border-radius:6px;background:#fff7e0;color:#3b2a00;font-size:.88em;line-height:1.45;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
#paper .doc-avisos__tit,#paper .doc-obs__tit{margin:0 0 .4em;font-weight:700;font-size:1em;line-height:1.3;font-family:inherit;color:inherit;letter-spacing:0}
#paper .doc-obs{margin:1.6em 0 0;padding:.8em 1em;border:1px solid #1f4e79;border-left-width:4px;border-radius:6px;background:#eef4fb;color:#102a43;font-size:.88em;line-height:1.45;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
#paper .doc-obs__intro{margin:0 0 .4em}
#paper .doc-obs ul{margin:0;padding-left:1.2em}
#paper .doc-obs li{margin:0 0 .35em}
#paper .doc-avisos ul{margin:0;padding-left:1.2em}
#paper .doc-avisos li{margin:0 0 .35em}
/* v2.7b: casilla de datos de terceros (antes de redactar un documento con datos de otras personas) */
.terceros{display:flex;flex-direction:column;gap:var(--y-s-3)}
.terceros__caja{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--y-borde-campo);border-radius:var(--y-r-md);background:#fff;line-height:1.45;cursor:pointer}
.terceros__caja input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--y-cobalto);cursor:pointer}
.terceros__caja:focus-within{outline:2px solid var(--y-cobalto);outline-offset:2px}
.terceros .btn:disabled{opacity:.45;cursor:not-allowed}

/* ===================== v2.7n (QA v2.7m): otros documentos (body.con-formato, app.js aplicarFormato). Sin ?tipo nada cambia ===================== */
/* GRAVE: título corto por tipo (app.js DOC_NOMBRE: «Carta poder», «Recomendación laboral»), sin «…»; si no cabe en un renglón pasa a dos,
   dentro de la cabecera, y nunca se pega a «Entrar» (el hueco de .app-top se respeta: el título encoge, los botones no). */
body.con-formato .app-top__titulo{min-width:0;flex:0 1 auto;overflow:visible;white-space:normal;line-height:1.2}
body.con-formato .app-top__titulo #tipoTitulo,
body.con-formato.oficio-listo .app-top__titulo #tipoTitulo.app-top__oficio{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;max-width:none;min-width:0}
body.con-formato .app-top__acc{flex:none}
@media (max-width:420px){ body.con-formato.oficio-listo .app-top__titulo #tipoTitulo.app-top__oficio{font-size:1rem} }
/* MEDIA: el aviso GRATIS del invitado también en celular con ?tipo= (el formato entra ya «started»); compacto y en su propio renglón,
   en el flujo (empuja, no tapa el chat). Con teclado abierto (body.compacto) se esconde para dejarle el alto a la pregunta. */
@media (max-width:959px){
  body.started.con-formato.invitado:not(.yl-verificando):not(.compacto) .bienvenida:not([hidden]){display:flex}
  body.con-formato .bienvenida{padding:12px var(--y-s-4);gap:4px 10px}
  body.con-formato .sello-gratis{font-size:.9375rem;padding:4px 10px 3px;border-radius:9px}
  body.con-formato .bienvenida__txt{font-size:.8125rem;line-height:1.35}
}
/* A 360 px o menos el formulario del primer paso ya está abierto: sólo el aviso (GRATIS en rojo, 6.15:1), sin el sello, para no comerle el chat */
@media (max-width:360px){ body.con-formato .sello-gratis{display:none} }
/* OJO: «Escríbelo» / «díctalo» con área de toque de 44×44 px; el margen negativo evita que el renglón crezca (el aviso tiene 12 px de relleno) */
body.con-formato .bienvenida__acc{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px;margin:-12px 0;vertical-align:middle}

/* v2.7b MENOR (no viene en el diff de QA): el aviso de datos de salud se queda a la vista al bajar en el chat (sólo con ?tipo= no oficio) */
body.con-formato .log > .aviso-sensibles{position:sticky;top:0;z-index:2}
body.con-formato .log:has(> .aviso-sensibles){-webkit-mask-image:none;mask-image:none}
/* v2.7b (QA G-1): sin relleno arriba el aviso fijo queda pegado al borde del chat (no se asoma texto encima de él) y con sombra se ve que
   lo de abajo pasa por debajo; app.js además evita que la última burbuja empiece tapada */
body.con-formato .log:has(> .aviso-sensibles){padding-top:0}
body.con-formato .log > .aviso-sensibles{box-shadow:0 0 0 4px #fff,0 6px 8px -4px rgba(0,0,0,.18)}
/* fix1 (prueba prod 29-oct): en celular el aviso fijo ocupaba 2 renglones y tapaba la burbuja anterior a la última; más compacto
   (app.js scroll() además deja completa la penúltima burbuja cuando ella y la última caben debajo del aviso) */
@media (max-width:959px){ body.con-formato .log > .aviso-sensibles{padding:3px 8px;font-size:.75rem;line-height:1.3} }

/* v2.7 T3 (QA 29-oct): en móvil, los pasos con 4–6 campos (carta_trabajo, acta_administrativa, constancia_laboral,
   testigos…) dejaban el registro (#chatLog) en ~44px: el saludo/la pregunta quedaban ocultos y el aviso fijo los tapaba.
   Se reserva un alto mínimo al registro fuera del modo compacto; el formulario del paso sigue con su propio scroll
   (Continuar va debajo del último campo, como en la regla de .row--end). Probado en 320x740 y 390x844: la pregunta
   pasa de 0px visibles a ≥45px en todos los pasos; también probado en 360x640, 1440x900 y modo compacto (320x568):
   ninguna pregunta queda oculta y el modo compacto no cambia. */
body:not(.compacto) .log{min-height:clamp(90px,15vh,140px)}
/* T3 (prueba de usuario 29-oct, punto 5): en compu de poca altura (≤ 960 px), la barra de abajo (ajustes, descarga, «Hacer nuevo
   documento», prueba gratis y aviso) se compacta para que la hoja de la vista previa se vea más. Sólo espacios y tamaños; nada se oculta. */
@media (min-width:960px) and (max-height:960px){
  .ajustes{padding-top:8px;padding-bottom:8px;row-gap:6px}
  .descarga{padding-top:8px;padding-bottom:6px;row-gap:4px}
  .descarga .small{flex:1 1 200px;min-width:0;margin:0}
  .descarga .btn--grande,.nuevo .btn--grande{min-height:44px}
  .nuevo{padding-bottom:8px}
  .prueba-bar{padding-top:8px;padding-bottom:8px;row-gap:6px}
  .prueba-bar__txt{font-size:.875rem;line-height:1.35}
  .vista__privacidad{padding-bottom:8px;font-size:.8125rem;line-height:1.35}
}