/* PARA COTIZAR CON EL TELÉFONO EN LA MANO, delante del cliente.
   Todo lo tocable, de 48 px para arriba; todo lo legible, sin entornar. */

.campo{display:block; margin:1.1rem 0}
.campo > span{display:block; font-weight:600; margin-bottom:.35rem}
.campo > span small{display:block; font-weight:400; color:#616E7C; font-size:.85rem}
.campo input[type=text], .campo select, .campo textarea{
  width:100%; box-sizing:border-box; font:inherit; font-size:1rem;
  padding:.75rem .8rem; border:1px solid #CBD2D9; border-radius:.6rem;
  background:#fff; color:#1F2933; min-height:3rem;
}
.campo textarea{min-height:5rem; line-height:1.45; resize:vertical}
.campo--linea{display:flex; align-items:flex-start; gap:.6rem; min-height:3rem}
.campo--linea input{width:1.4rem; height:1.4rem; margin-top:.15rem}
.campo--linea span{font-weight:600}

.grupo{border:none; padding:0; margin:1.2rem 0}
.grupo legend{font-weight:600; padding:0; margin-bottom:.45rem}

.opciones{display:flex; flex-direction:column; gap:.55rem}
.opcion{
  display:grid; grid-template-columns:1.5rem 1fr auto; gap:.2rem .6rem;
  align-items:center; padding:.75rem .85rem; min-height:3rem;
  border:1px solid #CBD2D9; border-radius:.65rem; background:#fff; cursor:pointer;
}
.opcion:has(input:checked){border-color:#8a7f66; background:#F6F2E8}
.opcion input{grid-row:1 / span 2; width:1.3rem; height:1.3rem}
.opcion b{font-size:1.05rem}
.opcion em{grid-row:1 / span 2; font-style:normal; font-weight:700; font-size:1.05rem}
.opcion span{grid-column:2 / span 2; font-size:.87rem; color:#616E7C; line-height:1.35}

/* SIN MARGEN A LA DERECHA. Con «width:100%» el margen de «.boton» empujaba la
   pagina 6 px y aparecia desplazamiento lateral en un formulario que cabia de
   sobra. No se veia mirando los elementos —ninguno se salia— porque el margen
   no entra en su caja: solo lo canto el ancho desplazable. */
.boton--armar{width:100%; margin-right:0; margin-top:1.2rem; background:#2f6b3f; color:#fff; border-color:#2f6b3f}

.hoja{
  background:#fff; border:1px solid #d9d3c4; border-radius:.6rem;
  padding:1rem .8rem; overflow-x:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.5;
  white-space:pre; -webkit-user-select:text; user-select:text;
}
.acciones{display:flex; gap:.6rem; margin-top:.8rem}
.acciones .boton{flex:1}
.dice{min-height:1.2rem; font-size:.9rem; color:#616E7C; line-height:1.45}
.dice--mal{color:#B91C1C}
.dice--bien{color:#047857}