/* ─────────────────────────────────────────────────────────────
   Constructor — desviaciones APROBADAS sobre el prototipo V3

   La hoja del constructor es constructor-v3.css, portada de V3 por script y
   sin tocar. Aqui va SOLO lo que V3 no tiene, cada regla con la decision que
   la justifica. Todo selector empieza por .jlc. Si una regla no tiene motivo
   escrito, sobra.
   ───────────────────────────────────────────────────────────── */

/* 1. Tres origenes. JL, 2026-09-12: Proyecto nuevo, Ampliacion /
      modernizacion y Renovacion de mantenimiento / continuidad operativa.
      El .seg de V3 es de dos columnas porque tenia dos opciones. */
.jlc .seg[data-opciones="3"]{grid-template-columns:repeat(3,1fr)}

/* 2. Salir de la sesion. V3 es un prototipo sin login; Comercial exige ADMIN
      y necesita una salida. Solo aparece con sesion: el banco de comparacion
      no la pinta. */
.jlc .jlc-sesion{display:flex;align-items:center;gap:10px;margin-left:6px;padding-left:14px;border-left:1px solid #d9d4cf;font-size:12px;color:#555}
.jlc .jlc-salir{background:transparent;color:#111;font-weight:700;padding:6px 8px;border-radius:7px}
.jlc .jlc-salir:hover{background:#e6e1db}

/* 3. Senal de clic en lo que V3 ya hacia clicable sin decirlo: la navegacion
      interna, que pidio JL, las fuentes y los pasos de diseno. */
.jlc [data-ir],.jlc [data-fuente],.jlc .design-step{cursor:pointer}

/* 4. Titular de la portada viva que no cabe. JL, 2026-09-12: en pantalla
      ancha la columna de V3 mide 390 px y su titular de 52 px en mayusculas
      se corta. El tamano se ajusta al ancho real de la vista previa, con el
      de V3 como tope, y una palabra que aun asi no quepa se parte en vez de
      salirse. La hoja portada de V3 no se toca. */
.jlc .preview-body{container-type:inline-size}
.jlc .preview-body .headline{font-size:min(52px,12cqi);overflow-wrap:anywhere}

/* 5. Editar sin formularios. JL, 2026-09-12: construir una propuesta no puede
      sentirse como llenar un formulario administrativo. V3 muestra los datos
      en .field; los que se editan son esos mismos campos, sin borde propio. */
.jlc .jlc-campo{display:block;width:100%;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;line-height:1.45;outline:none}
.jlc textarea.jlc-campo{min-height:4.4em;resize:vertical}
.jlc .field:focus-within{border-color:#4a555c}
.jlc select.jlc-campo option{background:#111619;color:#dbe0e3}

/* 6. Dialogos. V3 no tiene ninguno y el constructor los necesita para lo que no
      cabe en una tarjeta: la historia, una fuente, agregar un capitulo. Son una
      .card de V3 sobre un velo, con sus mismos botones, no un modal ajeno.
      Prueba real de JL, 2026-09-13: lo escrito no se pierde. Cada accion
      confirma o avisa al lado de su boton o de su campo, un campo que falta se
      marca con el rojo de V3, y lo que es de otra cosa, como el hito nuevo
      dentro de la historia, va en su propio bloque con su propio boton. */
.jlc .jlc-velo{position:fixed;inset:0;z-index:60;background:rgba(5,7,8,.74);display:flex;align-items:flex-start;justify-content:center;padding:84px 16px 40px;overflow:auto}
.jlc .jlc-dialogo{width:min(660px,100%);margin:0;box-shadow:0 18px 60px rgba(0,0,0,.45)}
.jlc .jlc-dialogo-acciones{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}
.jlc .jlc-dialogo-acciones .jlc-nota{margin-right:auto;align-self:center}
.jlc .jlc-acciones-campo{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:8px 0 2px;flex-wrap:wrap}
.jlc .jlc-bloque{margin-top:18px;padding:14px 14px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.jlc .jlc-bloque .desc{margin:4px 0 10px}
.jlc .jlc-nota{font-size:11px;line-height:1.45;color:#72808a}
.jlc .jlc-nota:empty{display:none}
.jlc .jlc-nota.ok{color:#bce7c8}
.jlc .jlc-nota.error{color:#f19c9c}
.jlc .field .jlc-nota{margin-top:6px}
.jlc .field.jlc-invalido,.jlc .field.jlc-invalido:focus-within{border-color:var(--red)}

/* 7. Menos de tres cifras en la portada. V3 siempre trae tres; con datos reales
      la portada solo pone las que se pueden mostrar y no son cero, y una
      rejilla de tres con una sola cifra deja dos huecos grises. */
.jlc .mini-kpis[data-cifras="1"]{grid-template-columns:1fr}
.jlc .mini-kpis[data-cifras="2"]{grid-template-columns:repeat(2,1fr)}

/* 8. Productos e inversion se trabaja en su sitio (fase F7). V3 dibuja el
      buscador, la cantidad y el precio como textos; aqui son esos mismos
      elementos, editables y sin cambiar su caja. Las fotos reales de producto
      caben en los marcos donde V3 pone sus ilustraciones, y los nombres del
      proveedor, que llegan a doscientas letras, se cortan a tres lineas: el
      nombre entero esta en la ficha del renglon y al pasar el cursor. */
.jlc .searchbox{display:flex;align-items:center;gap:8px}
.jlc .searchbox .jlc-campo{flex:1;min-width:0}
.jlc .qty span .jlc-campo{text-align:center;line-height:31px}
.jlc .money .jlc-campo{min-width:0}
.jlc .prod-img img,.jlc .line-img img{max-width:88%;max-height:88%;object-fit:contain}
.jlc .proposal-hero img{max-width:72%;max-height:160px;object-fit:contain}
.jlc [data-renglon],.jlc [data-abrir-renglon]{cursor:pointer}
.jlc .line-name b,.jlc .catalog-item p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}