/* ot-ficha.css — LA FICHA ÚNICA DE LA OT (SPEC_FICHA_OT.md). Estilos de lo que cada fase añade al panel de la OT.
   FO-1 (03/10/2026): el pie fijo. Lo pinta js/ot-ficha-pie.js en #otPie. */

/* ── FO-1 · EL PIE FIJO ────────────────────────────────────────────────────────────────────────────────────────
   #otPie es HERMANO de .dp-body dentro de #detailPanel (columna flex): no flota sobre nada —no es `sticky` ni
   `fixed`—, así que no puede tapar la última línea de materiales. Los desplegables de la tabla (.cp-dd, fijos y con
   z-index 9000) quedan por encima. Sin z-index a propósito: no tiene que ganarle a nadie. */
.ot-pie{flex-shrink:0;background:var(--white,#fff);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(10,35,64,.06);padding:0 18px}
.ot-pie[hidden]{display:none}
/* Con «Previsualizar» abierto el panel enseña el PDF y la Síntesis, que ya lleva estas cifras: el pie se quita. */
.detail-panel.preview-mode .ot-pie{display:none}
.ot-pie-in{display:flex;align-items:center;gap:8px 26px;flex-wrap:wrap;padding:10px 0 11px}

.ot-pie-tots{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.ot-pie-g{font-size:27px;font-weight:800;letter-spacing:-.6px;color:var(--k-navy,#0A2340);line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}
.ot-pie-s{font-size:12px;color:var(--text2);line-height:1.4;white-space:nowrap}
.ot-pie-s.vo{white-space:normal;max-width:215px}   /* «valor de la OT · …»: se parte en vez de empujar el botón (P6b) */
.ot-pie-s b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ot-pie-s .m{color:var(--text3)}
/* D-1: la factura no saldría por lo que suman las líneas. Una marca junto al importe y su renglón, en ámbar (el de los
   avisos que no frenan); nunca en gris, aunque la OT esté «hasta ahora». */
/* B-2: la OT no se factura ella (presupuesto o contrato). Texto, no aviso: mismo cuerpo que el renglón pequeño. */
/* Con el importe que se cobra (15/10/2026) el renglón puede pasar de 600 px: se parte en líneas (hasta 215 px: a 1366 px, con la
   tablilla de costes, los dos botones y el principal, no queda más) en vez de empujar el botón principal a otra fila (P6b). Los importes llevan espacios duros (ot-ficha-pie.js): no se cortan. */
.ot-pie-n{font-size:12px;line-height:1.35;color:var(--text);font-weight:600;max-width:215px}
.ot-pie-gr{display:flex;align-items:baseline;gap:7px}
.ot-pie-marca{font-size:15px;font-weight:800;line-height:1;color:#92400E;background:#FEF3C7;border-radius:5px;padding:2px 5px;cursor:help}
.ot-pie-d{font-size:11.5px;line-height:1.35;color:#92400E;white-space:nowrap;font-variant-numeric:tabular-nums;cursor:help}
/* «hasta ahora» / «previsto»: la OT no está completada y el importe no es el definitivo. */
.ot-pie.es-gris .ot-pie-g{color:var(--text2)}
.ot-pie[data-estado="por_decidir"] .ot-pie-g{color:var(--text3)}
.ot-pie[data-estado="vacio"] .ot-pie-s{color:var(--text3)}

/* La tablilla «Uso interno»: Mano de obra / Materiales / Total × Coste / Venta / Margen / % s/venta. El vocabulario y
   los colores del margen, los del pie del editor de presupuestos (.est-margin-pos / .est-margin-neg, editor.css). */
.ot-pie-mgt{display:grid;grid-template-columns:auto repeat(4,auto);align-items:baseline;font-size:12px;line-height:1.45;color:var(--text2);border-left:1px solid var(--border);padding-left:22px;flex-shrink:0;font-variant-numeric:tabular-nums}
.ot-pie-mgt>span{padding:0 0 0 16px;text-align:right;white-space:nowrap}
.ot-pie-mgt>span.l{padding-left:0;text-align:left;color:var(--text)}
.ot-pie-mgt>span.l small{color:var(--text3);font-size:11px;margin-left:5px}
.ot-pie-mgt .h{font-size:9.5px;font-weight:700;letter-spacing:.45px;text-transform:uppercase;color:var(--text3);padding-bottom:1px}
.ot-pie-mgt .h.l{color:var(--text3);cursor:help;text-decoration:underline dotted rgba(10,35,64,.28);text-underline-offset:3px}
.ot-pie-mgt .t{border-top:1px solid var(--border);font-weight:700;color:var(--text);margin-top:2px;padding-top:2px}
.ot-pie-mgt .pos{color:#065F46;font-weight:600}
.ot-pie-mgt .neg{color:#991B1B;font-weight:600}
.ot-pie-mgt .t.pos,.ot-pie-mgt .t.neg{font-weight:700}
.ot-pie.es-gris .ot-pie-mgt,.ot-pie.es-gris .ot-pie-mgt>span.l,.ot-pie.es-gris .ot-pie-mgt .t,.ot-pie.es-gris .ot-pie-mgt .pos{color:var(--text3)}

@media(max-width:1100px){
  .ot-pie-g{font-size:23px}
  .ot-pie-in{gap:8px 16px}
  .ot-pie-mgt{padding-left:14px;font-size:11.5px}
  .ot-pie-mgt>span{padding-left:11px}
  .ot-pie-mgt>span.l:not(.t) small{display:none}   /* el reparto (xx %) se va; el `coef ×` del total se queda */
}
/* Estrecho: la tablilla baja a su propia fila, entera (sin scroll horizontal). */
@media(max-width:760px){
  .ot-pie{padding:0 12px}
  .ot-pie-g{font-size:21px}
  .ot-pie-tots{flex-shrink:1;min-width:0}
  .ot-pie-n{max-width:100%}
  .ot-pie-mgt{border-left:0;padding-left:0;flex-basis:100%;font-size:11px}
  .ot-pie-mgt>span{padding-left:8px}
}

/* F2 móvil (16/10/2026) — en el teléfono el pie va en UNA línea: el importe y su renglón; tocarlo despliega la tablilla
   y los envíos. El botón del paso vive en la barra inferior (js/ot-ficha-barra.js): aquí no se repite. La pieza que lo
   pliega es la común (css/clf-barra-documento.css, .clf-bd-pie). */
@media(max-width:767px){
  .ot-pie.clf-bd-pie:not(.abierto) .ot-pie-in{flex-wrap:nowrap;padding:8px 0}
  .ot-pie.clf-bd-pie:not(.abierto) .ot-pie-in>:not(.ot-pie-tots){display:none}
  .ot-pie.clf-bd-pie:not(.abierto) .ot-pie-tots{flex-direction:row;align-items:baseline;gap:10px;min-width:0;flex:1}
  .ot-pie.clf-bd-pie:not(.abierto) .ot-pie-tots>:nth-child(n+3){display:none}
  .ot-pie.clf-bd-pie:not(.abierto) .ot-pie-tots>:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ot-pie.clf-bd-pie:not(.abierto) .ot-pie-tots>:nth-child(2) br{display:none}
  /* El aviso de OT bloqueada (cabecera de la ficha): sus botones bajan bajo el texto en vez de salirse por la derecha. */
  .ot-lock-banner{flex-wrap:wrap}
  .ot-lock-actions{flex-wrap:wrap;flex-shrink:1;min-width:0}
  /* Cliente | Asignación: en 390 px las dos columnas no caben (la de Asignación se salía 70 px); una debajo de otra. */
  .ot-info-grid{grid-template-columns:minmax(0,1fr) !important}
}

/* ── FO-2 (04/10/2026) · UN BOTÓN: EL SIGUIENTE PASO ───────────────────────────────────────────────────────────
   A la derecha del pie: el motivo ESCRITO (rojo si el botón está inactivo; gris si es una nota con el botón activo) y
   el botón, que es la acción principal de la ficha (--k-naranja, el único color de acción). Junto al importe, a la
   izquierda: «Enviar parte al cliente» y «Ver como lo verá el cliente», como botones con borde (secundarios: sin el
   color de acción). */
.ot-pie-acc{margin-left:auto;flex:1 1 230px;justify-content:flex-end;display:flex;align-items:center;gap:6px 18px;min-width:0}
.ot-pie-sec{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0}
.ot-pie-env{display:flex;flex-direction:column;align-items:stretch;gap:6px;flex-shrink:0}
.ot-pie-lk{border:1px solid rgba(10,35,64,.6);background:#fff;border-radius:9px;padding:0 13px;height:32px;font:inherit;font-size:13px;font-weight:600;color:var(--k-navy,#0A2340);cursor:pointer;white-space:nowrap}
.ot-pie-lk:hover{background:#F1F5F9;border-color:var(--k-navy,#0A2340)}
.ot-pie-motivo{text-align:right;font-size:12px;line-height:1.3;color:#991B1B;margin-top:3px;max-width:300px}
.ot-pie-motivo.nt{color:var(--text3)}
.ot-pie-btn{flex-shrink:0;background:var(--k-naranja,#FF8C42);color:#fff;border:0;border-radius:12px;padding:0 24px;height:50px;font:inherit;font-size:16px;font-weight:700;box-shadow:0 4px 14px rgba(255,140,66,.35);white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums}
.ot-pie-btn:hover{background:var(--k-naranja-hover,#F1772A)}
.ot-pie-btn:focus-visible,.ot-pie-lk:focus-visible{outline:2px solid var(--k-navy,#0A2340);outline-offset:2px}
.ot-pie-btn:disabled{background:#E3E7ED;color:#6B7686;box-shadow:none;cursor:not-allowed}
/* El paso «Facturar» del stepper, cuando no se puede: sigue respondiendo al clic (dice el motivo), pero no invita. */
#detStepper .step[data-step="facturar"][aria-disabled="true"]{cursor:not-allowed}
/* Portátil (1366): el motivo se estrecha para que botón y motivo quepan en la fila del importe, sin bajar a otra. */
@media(max-width:1400px){
  .ot-pie-motivo{max-width:240px;font-size:11.5px}
  .ot-pie-btn{padding:0 18px}
}
@media(max-width:1100px){
  .ot-pie-acc{gap:6px 12px}
  .ot-pie-btn{padding:0 16px;font-size:15px;height:46px}
  .ot-pie-lk{font-size:12.5px;height:30px;padding:0 10px}
  .ot-pie-motivo{max-width:260px}
}
@media(max-width:760px){
  .ot-pie-env{flex-basis:100%;flex-direction:row;flex-wrap:wrap}
  .ot-pie-lk{flex:1 1 auto;height:36px}
  .ot-pie-acc{flex-basis:100%;margin-left:0;justify-content:space-between}
  .ot-pie-sec{align-items:flex-start}
  .ot-pie-motivo{text-align:left}
}

/* ── FO-4 (09/10/2026) · EL ORDEN DE LA FICHA Y «LO DEMÁS, PLEGADO» ────────────────────────────────────────────
   Tres bloques numerados (1 Texto del trabajo · 2 Técnicos y horas · 3 Materiales), cada uno con su cabecera y, a la
   derecha, su subtotal de venta sin IVA; debajo, los plegados. Los lleva js/ot-ficha-plegados.js. */
.ot-blq{margin:0 0 26px}
.ot-blq-h{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;padding-top:4px;flex-wrap:wrap}
.ot-blq-n{width:22px;height:22px;border-radius:50%;background:var(--bg);color:var(--text2);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transform:translateY(-2px)}
.ot-blq-h h2{margin:0;font-size:17px;font-weight:700;color:var(--k-navy,#0A2340);letter-spacing:-.2px;line-height:1.25}
.ot-blq-tot{margin-left:auto;font-size:15.5px;font-weight:700;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.ot-blq-tot small{font-size:11.5px;font-weight:500;color:var(--text3);margin-right:6px}
.ot-blq-tot:empty{display:none}
.ot-blq>.work-field:last-child{margin-bottom:0}

.ot-plegs{margin:30px 0 6px;border-bottom:1px solid var(--border)}
.ot-pleg{border-top:1px solid var(--border)}
.ot-pleg[hidden]{display:none}
.ot-pleg-b{display:flex;width:100%;align-items:center;gap:10px;background:none;border:0;padding:12px 2px;font:inherit;font-size:14px;text-align:left;color:var(--text);cursor:pointer}
.ot-pleg-b:hover b{color:var(--primary)}
.ot-pleg-b:focus-visible{outline:2px solid var(--k-navy,#0A2340);outline-offset:-2px;border-radius:6px}
.ot-pleg-b .ch{color:var(--text3);width:12px;font-size:11px;transition:transform .15s;flex-shrink:0}
.ot-pleg.ab>.ot-pleg-b .ch{transform:rotate(90deg)}
.ot-pleg-b b{font-weight:600}
.ot-pleg-b .ct{color:var(--text3);font-size:13px}
/* Lo pendiente de un plegado se dice en su cabecera, sin abrirlo: mensajes sin leer (chat), albaranes por revisar (documentos). */
.ot-pleg-nl{background:#EF4444;color:#fff;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.ot-pleg-nl[hidden]{display:none}
.ot-pleg-c{padding:2px 0 18px 22px}
.ot-pleg-c[hidden]{display:none}
@media(max-width:760px){
  .ot-blq-h h2{font-size:16px}
  .ot-pleg-c{padding-left:0}
}
/* El historial en línea no alarga la ficha sin fin: tiene su propio scroll. */
#otHistorial{max-height:440px;overflow-y:auto;padding-right:4px}

/* ── FO-7 (11/10/2026) · EL TEXTO DEL TRABAJO, CON EL ORIGINAL A SALVO (js/ot-ficha-texto.js) ───────────────────
   El encargo en una línea que se despliega; el trabajo realizado con caja que crece sola; debajo, la nota del original. */
.ot-encargo-linea{display:flex;width:100%;align-items:baseline;gap:10px;text-align:left;font:inherit;font-size:13.5px;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 11px;cursor:pointer}
.ot-encargo-linea:hover{border-color:var(--primary-lt)}
.ot-encargo-linea:focus-visible{outline:2px solid var(--k-navy,#0A2340);outline-offset:1px}
.ot-encargo-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ot-encargo-txt.vacio{color:var(--text3)}
.ot-encargo-ver{flex-shrink:0;font-size:12px;color:var(--primary);font-weight:600}
#otEncargo:not(.ab) #detDesc{display:none}
#otEncargo.ab .ot-encargo-linea{display:none}
#detWorkDone{overflow:hidden;resize:none;min-height:96px}
.ot-espera{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px dashed var(--border);border-radius:8px;color:var(--text2);font-size:13.5px}
.ot-espera i,.ot-espera svg{width:16px;height:16px;flex-shrink:0;color:var(--text3)}
.ot-hecho-montaje:empty{display:none}
.ot-hecho-montaje{margin-top:8px}
.ot-ia-texto{display:flex;flex-wrap:wrap;gap:8px}
.ot-hecho-nota{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px;font-size:12.5px;color:var(--text2)}
.ot-hecho-nota[hidden],.ot-hecho-original[hidden]{display:none}
.ot-hecho-nota button{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--primary);cursor:pointer;text-decoration:underline}
.ot-hecho-nota button:disabled{color:var(--text3);cursor:default;text-decoration:none}
.ot-hecho-original{margin-top:8px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.ot-hecho-original .cap{font-size:11.5px;color:var(--text3);margin-bottom:6px}
.ot-hecho-original .txt{white-space:pre-wrap;font-size:13.5px;color:var(--text);max-height:240px;overflow:auto}